Phương thức addEventListener() của Đối tượng HTML DOM

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

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

Mô hình

Ví dụ 1

Thêm sự kiện click vào phần tử <button>:

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

Thử nghiệm ngay

Ví dụ 2

Mã gọn hơn:

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

Thử nghiệm ngay

Bạn có thể tìm thấy nhiều ví dụ khác ở dưới cùng của trang.

Cú pháp

element.addEventListener(type, function, useCapture)

参數

参數 Mô tả
type

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

Hãy không sử dụng tiền tố "on".

Hãy sử dụng "click" thay vì "onclick".


Danh sách đầy đủ các sự kiện DOM
function Bắt buộc. Chương trình chạy khi sự kiện xảy ra.
useCapture

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

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

Trả về giá trị

Không có.

Chi tiết kỹ thuật

Phương pháp này sẽ thêm hàm bộ lắng nghe sự kiện được chỉ định vào bộ lắng nghe sự kiện của phần tử hiện tại để xử lý loại sự kiện được chỉ định. type sự kiện. useCapture Bật là true, bộ lắng nghe sự kiện sẽ được đăng ký như bộ lắng nghe sự kiện bắt. useCapture Bật là false, nó được đăng ký như bộ lắng nghe sự kiện thông thường.

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

Nếu một hàm bộ lắng nghe sự kiện được đăng ký bằng cùng một type và useCapture Nếu tham số được đăng ký hai lần, lần đăng ký thứ hai sẽ bị bỏ qua. Nếu bạn đang xử lý sự kiện trên một phần tử, và bạn đăng ký một bộ lắng nghe sự kiện mới trên phầ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 pháp hoặc Document.importNode() Khi sao chép một phần tử Document, các bộ lắng nghe sự kiện được đăng ký ban đầu sẽ không được sao chép.

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

Các ví dụ khác

Ví dụ 3

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

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

Thử nghiệm ngay

Ví dụ 4

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

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

Thử nghiệm ngay

Ví dụ 5

Để truyền giá trị tham số, hãy sử dụng "hàm ẩn danh":

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

Thử nghiệm ngay

Ví dụ 6

Thay đổi màu nền của phần tử <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Thử nghiệm ngay

Ví dụ 7

Khác biệt giữa bùng nổ và bắt giữ:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Thử nghiệm ngay

Ví dụ 8

Xóa trình xử lý sự kiện:

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

Thử nghiệm ngay

Hỗ trợ trình duyệt

element.addEventListener() Là chức 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:

HTML DOM EventListener

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