JavaScript - DOM Event Listener trong Javascript

25/03/2019, 10:22 AM | 25/03/2019, 10:22 AM | 793 | 025

Bài trước ta đã sử dụng DOM Event để thêm sự kiện cho một đối tượng HTML, trong bài này ta sẽ tìm hiểu thêm một cách nữa để thêm và xóa bỏ sự kiện cho đối tượng HTML đó là addEventListener() và removeEventListener().
1. Hàm addEventListener() trong javascript
Để thêm sự kiện với addEventListener() ta dùng cú pháp sau :

element.addEventListener("eventName", function(){
    // code
});

// Hoặc

element.addEventListener("eventName", FunctionName);

Trong đó :
    - element : là các đối tượng HTML Element.
    - eventName : là tên các sự kiện nhưng bỏ chữ on . ví dụ : onmouseover thành mouseover, onclick thành click ...
    - FunctonName : là tên hàm mà bạn muốn chạy khi sự kiện kích hoạt.
Ví dụ :

Xem DEMO

<html>
    <head>
    </head>
    <body>
      <div>
        <p>onmouseover here</p>
      </div>
      
       <script language="javascript">
             // Lấy đối tượng HTML
             var element = document.querySelector('div p');
          
             // Thêm sự kiện khi di chuột vào thì thay đổi chữ
             element.addEventListener("mouseover", function(){
                 element.innerHTML = "Have a nice day !";
             });
          
             // Thêm sự kiện khi di chuột ra thì thay đổi chữ cũ
             element.addEventListener("mouseout", function(){
                 element.innerHTML = "onmouseover here";
             });
        </script>
    </body>
</html>

2.Hàm removeEventListener() trong Javascript
Ngược lại với addEventListener() thì removeEventListener() sẽ xóa bỏ hành động đang được gán lên sự kiện. Cú pháp như sau :

element.removeEventListener("eventName", FunctionName);

Ví dụ : Tương tự như ví dụ ở phần trên nhưng ta thêm nút Stop, khi người dùng nhấn vào Stop thì dừng onmouseover và onmouseout lại

Xem DEMO

<html>
    <head>
    </head>
    <body>
      <div>
        <p>onmouseover here</p>
      </div>
      <input type="button" value="Stop" id="stop" />
      
       <script language="javascript">
             // Lấy đối tượng HTML
             var element = document.querySelector('div p');
         
             // Lấy đối tượng Button
             var ButtonName = document.getElementById('stop');

             function over(){
                element.innerHTML = "Have a nice day !";
             }

             function out(){
                element.innerHTML = "onmouseover here";
             }
         
             // Thêm sự kiện khi di chuột vào thì thay đổi chữ
             element.addEventListener("mouseover", over);
          
             // Thêm sự kiện khi di chuột ra thì thay đổi chữ cũ
             element.addEventListener("mouseout", out);
         
             // Thêm sự kiện khi click vào button thì dừng onmouseover và onmouseout
             ButtonName.addEventListener("click", function(){
                  // xóa hành động onmouseover
                  element.removeEventListener("mouseover", over);
                  // xóa hành động onmouseout
            	  element.removeEventListener("mouseout", out);
                  // đưa ra thông báo
                  alert("Bạn đã dừng sự kiện onmouseover và onmouseout !");
               
             });
        
          
        </script>
    </body>
</html>

Chú ý : Hàm addEventListener() và removeEventListener() không hoạt động trên phiên bản IE8 trở về trước, bạn có thể dùng attachEvent() và detachEvent() để thay thế :

element.attachEvent("EventName", funciton);
element.detachEvent("EventName", funciton);

Vậy là ta có thêm cách nữa để thêm sự kiện cho đối tượng HTML. Trên thực tế mình rất hay sử dụng addEventListener() vì nó có những cái hay riêng, hi vọng các ví dụ đơn giản này sẽ giúp các bạn.