Phương thức addEventListener() của Document trong HTML DOM

Định nghĩa và cách sử dụng

addEventListener() Phương pháp này gắn trình xử lý sự kiện vào tài liệu.

Mô hình

Ví dụ 1

Thêm sự kiện click vào tài liệu:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Thử nghiệm trực tiếp

Cú pháp đơn giản hơn:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

Thử nghiệm trực tiếp

Ví dụ 2

Bạn có thể thêm nhiều bộ lắng nghe sự kiện vào tài liệu:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Thử nghiệm trực tiếp

Ví dụ 3

Bạn có thể thêm các loại sự kiện khác nhau:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Thử nghiệm trực tiếp

Ví dụ 4

Khi truyền tham số, sử dụng hàm ẩn danh để gọi hàm có tham số:

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

Thử nghiệm trực tiếp

Ví dụ 5

Thay đổi màu nền của tài liệu:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Thử nghiệm trực tiếp

Ví dụ 6

Sử dụng phương thức removeEventListener():

// Thêm bộ lắng nghe sự kiện
document.addEventListener("mousemove", myFunction);
// Loại bỏ bộ lắng nghe sự kiện
document.removeEventListener("mousemove", myFunction);

Thử nghiệm trực tiếp

Cú pháp

document.addEventListener(type, function, capture)

Tham số

Tham số Mô tả
type

Bắt buộc. Tên sự kiện.

Vui lòng không sử dụng tiền tố "on".

Vui lòng sử dụng "click" thay vì "onclick".

Tất cả các sự kiện HTML DOM được liệt kê tại:

Hướng dẫn tham khảo đối tượng sự kiện HTML DOM
function

Bắt buộc. Hàm chạy khi sự kiện xảy ra.

Khi sự kiện xảy ra, đối tượng sự kiện sẽ được truyền làm tham số đầu tiên cho hàm.

Loại của đối tượng sự kiện phụ thuộc vào sự kiện được chỉ định. Ví dụ, sự kiện "click" thuộc về đối tượng MouseEvent.
capture

Tùy chọn (mặc định = false).

  • true - Chương trình xử lý được thực thi trong giai đoạn bắt cản.
  • false - Chương trình xử lý được thực thi trong giai đoạn bùng nổ.

Giá trị trả về

Không có.

Chi tiết kỹ thuật

Phương thức này sẽ thêm hàm xử lý sự kiện được chỉ định vào bộ lắng nghe sự kiện của nút hiện tại để xử lý sự kiện loại type được chỉ định. Nếu capture được đặt là true, thì bộ lắng nghe sự kiện được đăng ký như bộ lắng nghe sự kiện bắt cản. capture được đặt là false, nó được đăng ký như bộ lắng nghe sự kiện bình thường.

addEventListener() thì có thể được gọi nhiều lần, đăng ký nhiều sự kiện xử lý cho cùng một loại sự kiện trên cùng một nút. Nhưng cần lưu ý rằng DOM không thể xác định thứ tự các sự kiện xử lý được gọi nhiều lần.

Nếu một hàm lắng nghe sự kiện được đăng ký trên cùng một nút bằng cùng loại type và capture tham số đăng ký hai lần, lần đăng ký thứ hai sẽ bị bỏ qua. Nếu đang xử lý sự kiện trên một nút khi đăng ký một bộ lắng nghe sự kiện mới trên nút đó, bộ lắng nghe sự kiện mới sẽ không được gọi cho sự kiện đó.

Khi sử dụng Node.cloneNode() Phương thức hoặc Document.importNode() Khi sao chép một nút Document, phương thức sẽ không sao chép các bộ lắng nghe sự kiện đã đăng ký cho nút gốc.

Phương thức này cũng được định nghĩa trên các đối tượng Document và Window, và hoạt động tương tự.

Hỗ trợ trình duyệt

document.addEventListener Là tính năng DOM Level 2 (2001).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Trang liên quan

Phương thức phần tử

Phương thức addEventListener()

Phương thức removeEventListener()

Phương thức tài liệu

Phương thức addEventListener()

Phương thức removeEventListener()

Hướng dẫn

Sự kiện HTML DOM EventListener

Danh sách đầy đủ các sự kiện DOM