BASIC TO ADVANCE

Bài 13: DOM event trong javascript

Trong bài này mình sẽ giới thiệu đến mọi người về xử lý sự kiện trong DOM javascript.

1, Thêm sự kiện bằng HTML attribute.

-Như ở series học HTML mình cũng có nói qua với các bạn về các attribute như: onClickonMouseover,.... Dùng để bắt các sự kiện và thực thực thi hành động bằng javascript. Và giá trị của các thẻ này là code javascript.

VD: Xuất ra thông báo 'bạn vừa click' khi click vào thẻ div sau:

<div id="series" onclick="alert('Bạn vừa click')">Học CSS</div>

Xem Kết Quả

-Tương tự các bạn cũng có thể gọi hàm trong attribute đó.

VD: Khi rê chuột vào thẻ div sau thì sẽ gọi hàm show().

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
    <div >Di chuột vào chữ Học css để xem kết quả</div>
    <div id="series" onmouseover="show()">Học CSS</div>
    <script type="text/javascript">
        function show(){
            alert('Bạn vừa rê chuột vào')
        }
    </script>
</body>

</html>

Xem Kết Quả

Danh sách các event attribute

Sự kiện HTML5 Mô tả
onafterprint Kích hoạt sau khi một tài liệu được in
onbeforeprint Kích hoạt trước khi một tài liệu được in
onbeforeonload Kích hoạt trước khi một tài liệu được tải
onerror Kích hoạt khi một lỗi xảy ra
onhaschange Kích hoạt khi một tài liệu đã thay đổi
onload   Kích hoạt khi một tải liệu được tải
onmessage Kích hoạt khi một thông báo được kích hoạt (chạy)
onoffline Kích hoạt khi một tài liệu ở ngoại tuyến (bị ngắt mạng)
ononline Kích hoạt khi một tài liệu ở dạng trực tuyến
onpagehide Kích hoạt khi một cửa sổ bị ẩn
onpageshow Kích hoạt khi một cửa sổ trở lên được nhìn thấy (hiện lên)
onpopstate Kích hoạt khi lịch sử của cửa sổ thay đổi
onredo Kích hoạt khi một tài liệu thực hiện một redo
onresize Kích hoạt khi một cửa sổ được thay đổi lại kích thước
onstorage Kích hoạt khi một tài liệu được tải
onundo Kích hoạt khi một tài liệu thực hiện một undo
onunload   Kích hoạt khi một người sử dụng rời khỏi tài liệu
onclick   Kích hoạt trên con chuột vừa nhấn vào phần tử
ondblclick   Kích hoạt trên con chuột vừa nhấn đúp vào phần tử
ondrag   Kích hoạt khi một phần tử được kéo
ondragend Kích hoạt ở phần cuối của thao tác kéo
ondragenter Kích hoạt khi một phần tử đã được kéo tới một mục tiêu được thả xuống hợp lệ
ondragleave Kích hoạt khi một phần tử rời khỏi một mục tiêu thả xuống hợp lệ
ondragover Kích hoạt khi một phần tử đang được kéo qua một mục tiêu có thể thả xuống hợp lệ
ondragstart Kích hoạt ở phần đầu của một hoạt động kéo
ondrop Kích hoạt khi một phần tử được kéo đang được thả xuống
onmousedown   Kích hoạt khi một nút chuột (chuột trái hay phải) được nhấn
onmousemove   Kích hoạt khi con trỏ chuột di chuyển
onmouseout   Kích hoạt khi con trỏ chuột rời khỏi một phần tử
onmouseover   Kích hoạt khi con trỏ chuột di chuyển qua một phần tử
onmouseup   Kích hoạt khi một nút chuột được thả ra
onmousewheel Kích hoạt khi sử dụng bánh xe chuột
onscroll Kích hoạt khi một thanh cuốn của phần tử được cuốn

Xem Thêm...

2, Thêm sự kiện bằng javascript.

-Để thêm sự kiện bằng javascript chúng ta sử dụng cú pháp:

element.eventName = function ()
{
    //code
}

Trong đó:

  • element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
  • eventName là tên các sự kiện như onclick,onmouseover,...

VD: Thêm sự kiện khi con trỏ chuột chạm vào thẻ html có id='jav'.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
    <div >Di chuột vào chữ Học javascript để xem kết quả</div>
    <div id="jav" >Học javascript</div>
    <script type="text/javascript">
        //chọn thẻ có id = jav
        var element = document.getElementById('jav');
        //Thêm sự kiện
        element.onmouseover = function (){
            alert('Bạn vừa di chuột vào');
        };
    </script>
</body>

</html>

Xem Kết Quả

-Trong trường hợp mà đối tượng HTML các bạn chọn có nhiều hơn 1 thì các bạn cần phải chạy một vòng for để duyệt và add sự kiện cho nó.

VD:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
    <div >Di chuột vào chữ Học javascript để xem kết quả</div>
    <ul>
        <li class="list">Li 1</li>
        <li class="list">Li 2</li>
        <li class="list">Li 3</li>
        <li class="list">Li 4</li>
        <li class="list">Li 5</li>
        <li class="list">Li 6</li>
        <li class="list">Li 7</li>
    </ul>
    <script type="text/javascript">
        //chọn thẻ có class = list
        var element = document.getElementsByClassName('list');
        //Thêm sự kiện
        for(i=0; i<element.length; i++) {
            element[i].onclick = function () {
                alert('Bạn vừa click vào thẻ ' + this.innerText);
            };
        }
    </script>
</body>

</html>  

Xem Kết Quả

3, Lời Kết.

-Như vậy mình đã giới thiệu xong với vọi người về DOM element trong javascript rồi. Các bạn cố gắng thực hành nhiều về phần này cho nhớ.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

21 Comments

Bạn ơi mình click vào li1 ,li2... nó vẫn hiển thị thông  báo là bạn vừa click vào Li7 (Có thể do biến i nó lưu lại). Chỗ này xử lý thế nào bạn nhỉ.

Toàn

3 năm trước

Chào Toàn,
Ví dụ đó mình đã không test kỹ, và mình đã sử lại rồi mời bạn xem lại à (lỗi do function closures )!.
Link Update: https://toidicode.com/live/?id=85

Vũ Thanh Tài

3 năm trước

Bạn cho mình hỏi trong phần thí dụ thứ 2 duyệt qua các thẻ ul li trong trong phần thêm sự kiện javascript. Bạn khai báo var j = i  để làm gì vậy ?

Hien Nguyen

2 năm trước

Cảm ơn bạn nhé!
Mình nhầm đó ạ.

Vũ Thanh Tài

2 năm trước

admin ơi trang web này này https://mangapark.net/manga/daichohen-doraemon/i1643911 có mấy cái menu mọi khi bấm chọn 1 mục xuống dưới thì nó sẽ load sang trang web có chứa danh sách à ,menu đó dùng sự kiện onchange à hay onload????

[img]https://i36.photobucket.com/albums/e23/longyu/menu_zpsgqpcphyp.jpg[/img]

jonh777

1 năm trước

onchange nhé bạn!

Vũ Thanh Tài

1 năm trước

menu đó chắc cũng ghi mấy bài hướng dẫn trên web

jonh777

1 năm trước

làm menu đó 0 cần lệnh if else hả bạn

jonh777

1 năm trước

admin đâu rồi

jonh777

1 năm trước

vũ thành tài ,mình tưởng cái sự kiện khi ta chọn 1 menu option và bấm xuống thì nó chuyển tới tới trang web liên quan tới cái menu đó là onloiad ,onuload chứ ,thí dụ bấm menu trên trangthu3 nó đi tới trang thứ 3,bạn đâu rồi

jonh777

1 năm trước

bạn ơi trong javascript nếu muốn tạo hiệu ứng chuyển sang trang web khác khi chọn 1 menu có liên kết đến web đó thì dùng document.form à??????

jonh777

1 năm trước

bạn ơi ,onclick áp dụng được cho nút button,thế nó áp dụng cho onload được 0,à bạn docuemt.getelementbyid(id) áp dụng cho function tenham() được 0,mà hình như đối số trong hàm nhiều 0 dùng return được???????????????

jonh777

11 tháng trước

bạn ơi document.getelementbyclassname áp dụng cho <select name"="name"> được 0,cái menu xổ xuống đó

jonh777

11 tháng trước

document.getElementsByTagName('class_name')

phương thức này chỉ để select element theo class name thôi nhé bạn!

Vũ Thanh Tài

11 tháng trước

https://mangapark.net/,https://mangakakalot.com/manga/tomodachi bạn ơi 2 trang web xem truyện này làm bằng html dom và javascript à???????????????????????????????

jonh777

11 tháng trước

mình nói mấy cái menu của 2 trang web xem truyện đó

jonh777

11 tháng trước

bạn ơi mình đã biết cách làm hộp lựa chọn <select></select><option></option> hoạt động rồi đó là sử dụng hàm formHandle ,và dùng biến var là URL=document.form.site.option cộng với window.location.href=url;thì sẽ làm cho cho option chuyển hướng trang ,cái này gọi là combo box mà,dù mình cũng chưa hài làm ,vì khi chuyển hướng trang thì trang kế tiếp không còn menu combo box

jonh777

8 tháng trước

var url=document.form.site.option(selectedindex).value;

jonh777

8 tháng trước

var url=document.form.site.option(document.form.site.selectedindex).value chứ

jonh777

8 tháng trước

bạn đâu rồi 

jonh777

8 tháng trước

bạn tài mãnh khoẻ chứ,dạo này còn on ở web này không

jonh777

2 tháng trước

Bình luận

Captcha