JavaScript HTML DOM trình nghe sự kiện

Phương pháp addEventListener()

Mẫu

Thêm sự kiện lắng nghe khi người dùng nhấp vào nút:

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

Thử nghiệm trực tiếp

addEventListener() Phương pháp này thêm sự kiện xử lý cho phần tử cụ thể.

addEventListener() Phương pháp này thêm sự kiện xử lý vào phần tử mà không xóa bỏ sự kiện xử lý đã có.

Bạn có thể thêm nhiều sự kiện xử lý vào một phần tử.

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

Bạn có thể thêm trình xử lý sự kiện vào bất kỳ đối tượng DOM nào mà không chỉ là phần tử HTML, ví dụ như đối tượng window.

addEventListener() phương pháp giúp chúng ta dễ dàng kiểm soát cách sự kiện phản ứng với sự bề mặt.

Khi sử dụng addEventListener() phương pháp khi JavaScript và HTML là tách biệt, đạt được tính đọc tốt hơn; ngay cả khi không kiểm soát HTML cũng cho phép bạn thêm sự kiện lắng nghe.

Bạn có thể sử dụng removeEventListener() phương pháp dễ dàng xóa bỏ sự kiện lắng nghe.

cú pháp

element.addEventListener(event, function, useCapture);

tham số thứ nhất là loại sự kiện (ví dụ "click" hoặc "mousedown").

tham số thứ hai là hàm mà chúng ta cần gọi khi sự kiện xảy ra.

tham số thứ ba là giá trị布尔, xác định sử dụng sự kiện bề mặt hay sự kiện bắt giữ. Tham số này là tùy chọn.

Lưu ý:Hãy không sử dụng tiền tố "on" cho sự kiện; hãy sử dụng "click" thay vì "onclick".

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

Mẫu

hiện 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!"); });

Thử nghiệm trực tiếp

Bạn cũng có thể gọi hàm "đặt tên" bên ngoài:

Mẫu

hiện 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ử nghiệm trực tiếp

thêm nhiều trình xử lý sự kiện vào cùng một phần tử

addEventListener() Phương pháp này cho phép bạn thêm nhiều sự kiện vào cùng một phần tử mà không xóa bỏ sự kiện đã có:

Mẫu

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

Thử nghiệm trực tiếp

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

Mẫu

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

Thử nghiệm trực tiếp

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

addEventListener() cho phép bạn thêm sự kiện lắng nghe vào bất kỳ đối tượng HTML DOM nào, chẳng hạn như phần tử HTML, đối tượng HTML, đối tượng window hoặc bất kỳ đối tượng hỗ trợ sự kiện nào khác, chẳng hạn như đối tượng XMLHttpRequest.

Mẫu

thêm sự kiện lắng nghe khi người dùng điều chỉnh kích thước cửa sổ:

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

Thử nghiệm trực tiếp

Truyền tải tham số

Khi truyền tải giá trị tham số, hãy sử dụng hàm "匿名函数" để gọi hàm đã chỉ định dưới dạng tham số:

Mẫu

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

Thử nghiệm trực tiếp

Sự kiện bùng nổ hay sự kiện bắt giữ?

Trong HTML DOM có hai phương pháp truyền dẫn sự kiện: bùng nổ và bắt giữ.

Truyền dẫn sự kiện là một phương pháp định nghĩa thứ tự của phần tử khi xảy ra sự kiện. Giả sử phần tử <div> có phần tử <p> trong đó, sau đó người dùng nhấp vào phần tử <p>, phần tử nào nên xử lý sự kiện "click" trước?

Trong cách truyền dẫn bùng nổ, phần tử trong cùng sẽ xử lý sự kiện trước, sau đó là phần tử ngoài hơn: Trước tiên xử lý sự kiện click của phần tử <p>, sau đó là sự kiện click của phần tử <div>.

Trong cách bắt giữ, phần tử ngoài cùng sẽ xử lý sự kiện trước, sau đó là phần tử trong hơn: Trước tiên xử lý sự kiện click của phần tử <div>, sau đó là sự kiện click của phần tử <p>.

Trong phương pháp addEventListener(), bạn có thể quy định loại truyền dẫn thông qua việc sử dụng tham số "useCapture":

addEventListener(event, function, useCapture);

Giá trị mặc định là falsethì sẽ sử dụng cách truyền dẫn bùng nổ, nếu giá trị này được đặt là truethì sự kiện được truyền dẫn theo cách bắt giữ.

Mẫu

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

Thử nghiệm trực tiếp

phương pháp removeEventListener()

removeEventListener() Phương pháp sẽ xóa bỏ các sự kiện xử lý đã thông qua addEventListener() Chương trình xử lý sự kiện gắn vào phương pháp:

Mẫu

element.removeEventListener("mousemove", myFunction());

Thử nghiệm trực tiếp

Hỗ trợ trình duyệt

Số trong bảng quy định phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn các phương pháp này.

Phương pháp
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Chú ý:IE 8, Opera 6.0 và các phiên bản trước không hỗ trợ addEventListener() và removeEventListener() Phương pháp. Tuy nhiên, đối với các phiên bản trình duyệt đặc biệt này, bạn có thể sử dụng attachEvent() Phương thức thêm trình xử lý sự kiện vào phần tử, do detachEvent() Phương thức xóa:

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

Mẫu

Giải pháp tương thích nhiều trình duyệt:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Đối với các trình duyệt phổ biến, trừ IE 8 và các phiên bản sớm hơn
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Đối với IE 8 và các phiên bản sớm hơn
    x.attachEvent("onclick", myFunction);
}

Thử nghiệm trực tiếp

Tài liệu tham khảo HTML DOM Event 对象

Để xem danh sách tất cả các sự kiện HTML DOM, vui lòng truy cập trang Tài liệu tham khảo HTML DOM Event 对象.