Tìm hiểu HTML DOM EventListener trong JavaScript

Phương thức addEventListener()

Ví dụ thêm trình nghe sự kiện được kích hoạt khi người dùng nhấp vào nút:

document.getElementById("myBtn").addEventListener("click", displayDate);

Phương thức addEventListener() gắn một trình xử lý sự kiện vào phần tử được chỉ định.

Phương thức addEventListener() gắn một trình xử lý sự kiện vào một phần tử mà không ghi đè các trình xử lý sự kiện hiện có.

Bạn có thể thêm nhiều xử lý sự kiện vào một phần tử hoặc có thể thêm nhiều trình xử lý sự kiện của cùng một kiểu với một phần tử, ví dụ như hai sự kiện “click” .

Bạn có thể thêm trình nghe sự kiện cho bất kỳ đối tượng DOM nào không chỉ các phần tử HTML. Tức là đối tượng window. Phương thức addEventListener() giúp bạn dễ dàng kiểm soát sự kiện phản ứng như thế nào với bubbling.

Khi sử dụng phương thức addEventListener (), mã JavaScript được tách ra khỏi HTML markup, để có thể đọc tốt hơn và cho phép bạn thêm trình xử lý sự kiện ngay cả khi bạn không kiểm soát HTML markup. Bạn có thể dễ dàng xóa một người nghe sự kiện bằng cách sử dụng phương thức removeEventListener().

Cú pháp:

element.addEventListener(event, function, useCapture);

Thông số đầu tiên là loại sự kiện (như “click” hoặc “mousedown”). Tham số thứ hai là chức năng chúng ta muốn gọi khi sự kiện xảy ra. Thông số thứ ba là một giá trị boolean xác định có sử dụng sự kiện bubbling hay sự kiện capturing. Tham số này là tùy chọn.

Lưu ý rằng bạn không sử dụng tiền tố “on” cho sự kiện; Sử dụng “click” thay vì “onclick”.

Thêm trình xử lý sự kiện vào một phần tử

Ví dụ thông báo “Hello World!” khi người dùng nhấp vào một phần tử:

element.addEventListener(“click”, function(){ alert(“Hello World!”); });

Bạn cũng có thể tham khảo một “tên” hàm bên ngoài. Ví dụ thông báo “Hello World!” khi người dùng nhấp vào một phần tử:

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

Thêm nhiều trình xử lý sự kiện vào phần tử tương tự

Phương thức addEventListener() cho phép bạn thêm nhiều sự kiện vào cùng một phần tử, mà không ghi đè các sự kiện hiện có:

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Bạn có thể thêm sự kiện của các loại khác nhau vào cùng một phần tử:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Thêm trình xử lý sự kiện vào đối tượng window

Phương thức addEventListener() cho phép bạn thêm trình xử lý sự kiện vào bất kỳ đối tượng DOM HTML nào như các phần tử HTML, tài liệu HTML, đối tượng window, hoặc các đối tượng khác hỗ trợ sự kiện, như đối tượng xmlHttpRequest.

Thêm một trình sự kiện listener kích hoạt khi người dùng thay đổi kích thước cửa sổ:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Chuyển tham số

Khi truyền các giá trị tham số, hãy sử dụng một “hàm ẩn danh” gọi hàm đã chỉ định với các tham số:

element.addEventListener(“click”, function(){ myFunction(p1, p2); });

Sự kiện Bubbling hay sự kiện Capturing

Có hai cách truyền sự kiện trong DOM HTML, Bubbling và Capturing.

Sự kiện propagation là một cách để xác định thứ tự phần tử khi một sự kiện xảy ra. Nếu bạn có phần tử <p> bên trong một phần tử <div>, và người dùng nhấp chuột vào phần tử <p>, sự kiện “click” của phần tử đó nên được xử lý đầu tiên?

Trong Bubbling, sự kiện phần tử bên trong được xử lý đầu tiên và sau đó là bên ngoài: sự kiện nhấp chuột của phần tử <p> được xử lý đầu tiên, sau đó là sự kiện nhấp chuột của phần tử <div>.

Trong Capturing, sự kiện của phần tử bên ngoài được xử lý đầu tiên và sau đó là phần tử bên trong: sự kiện nhấp chuột của phần tử <div> sẽ được xử lý đầu tiên, sau đó là sự kiện nhấp chuột của phần tử <p>.

Với phương thức addEventListener(), bạn có thể chỉ định kiểu truyền thông bằng cách sử dụng tham số “useCapture”:

addEventListener(event, function, useCapture);

Giá trị mặc định là false, nó sẽ sử dụng lệnh bubbling propagation, khi giá trị được đặt thành true, sự kiện capturing được sử dụng.

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Phương thức removeEventListener()

Phương thức removeEventListener() loại bỏ các trình xử lý sự kiện đã được đính kèm với phương thức addEventListener():

element.removeEventListener("mousemove", myFunction);

Trình duyệt hỗ trợ

Số trong bảng xác định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ các phương thức này.

Lưu ý: Các phương thức addEventListener() và removeEventListener() không được hỗ trợ phiên bản trước IE8 và phiên bản trước Opera 6.0. Tuy nhiên, đối với các phiên bản trình duyệt cụ thể này, bạn có thể sử dụng phương thức attachEvent() để gắn các trình xử lý sự kiện vào phần tử và phương thức detachEvent() để loại bỏ nó:

element.attachEvent(event, function);
element.detachEvent(event, function);

Ví dụ giải pháp trình duyệt chéo:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}