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ư: onClick, onMouseover,…. 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:

Học CSS

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().

    
    
    



    
Di chuột vào chữ Học css để xem kết quả
    
Học CSS
    
        function show(){
            alert('Bạn vừa rê chuột vào')
        }
    

Xem Kết Quả

Danh sách các event attribute

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’.

    
    
    



    
Di chuột vào chữ Học javascript để xem kết quả
    
Học 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');
        };
    

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:

    
    
    



    
Di chuột vào chữ Học javascript để xem kết quả
    

        
Li 1
        
Li 2
        
Li 3
        
Li 4
        
Li 5
        
Li 6
        
Li 7
    
    
        //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);
            };
        }
    


  

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ớ.