DANH MỤC: JAVASCRIPT CƠ BẢN

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++){
          	var j = 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ớ.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

Biển học vô biên, quay đầu là dại!

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia