Hướng dẫn which event handler is used in javascript? - trình xử lý sự kiện nào được sử dụng trong javascript?

Các sự kiện có sẵn là gì?

Các sự kiện được ghi lại trong và/hoặc dưới các trang cho các đối tượng JavaScript phát ra chúng. Ví dụ: để tìm hiểu các sự kiện được kích hoạt trên cửa sổ trình duyệt hoặc tài liệu hiện tại, hãy xem các phần sự kiện trong Window và

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

Bạn có thể sử dụng tham chiếu sự kiện để tìm hiểu những sự kiện hỏa hoạn của JavaScript nào cho các API cụ thể, ví dụ: Hoạt hình, phương tiện truyền thông, và như vậy.

Đăng ký xử lý sự kiện

Có hai cách tiếp cận được đề xuất để đăng ký xử lý. Mã xử lý sự kiện có thể được thực hiện để chạy khi một sự kiện được kích hoạt bằng cách gán nó cho thuộc tính Onevent tương ứng của phần tử đích hoặc bằng cách đăng ký trình xử lý làm trình nghe cho phần tử bằng phương thức

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

CẢNH BÁO: Cách tiếp cận thứ ba để thiết lập trình xử lý sự kiện bằng cách sử dụng các thuộc tính HTML Onevent không được khuyến khích! Chúng thổi phồng đánh dấu và làm cho nó ít đọc hơn và khó gỡ lỗi hơn. Để biết thêm thông tin, xem Trình xử lý sự kiện nội tuyến. A third approach for setting event handlers using HTML onevent attributes is not recommended! They inflate the markup and make it less readable and harder to debug. For more information see Inline event handlers.

Sử dụng các thuộc tính Onevent

Theo quy ước, các đối tượng JavaScript rằng các sự kiện hỏa hoạn có các thuộc tính "Onevent" tương ứng (được đặt tên bằng tiền tố "ON" với tên của sự kiện). Các thuộc tính này được gọi để chạy mã xử lý liên kết khi sự kiện được kích hoạt và cũng có thể được gọi trực tiếp bởi mã của riêng bạn.

Để đặt mã xử lý sự kiện, bạn chỉ có thể gán nó cho thuộc tính Onevent thích hợp. Chỉ có một người xử lý sự kiện có thể được chỉ định cho mọi sự kiện trong một yếu tố. Nếu cần, người xử lý có thể được thay thế bằng cách gán một chức năng khác cho cùng một thuộc tính.

Dưới đây chúng tôi chỉ ra cách đặt chức năng

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

Lưu ý rằng một đối tượng đại diện cho sự kiện được truyền như là đối số đầu tiên cho trình xử lý sự kiện. Đối tượng sự kiện này thực hiện hoặc có nguồn gốc từ giao diện

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

EventTarget.addEventListener

Cách linh hoạt nhất để đặt trình xử lý sự kiện trên một phần tử là sử dụng phương thức

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

Lưu ý: Ví dụ, khả năng thêm và xóa trình xử lý sự kiện cho phép bạn, có cùng một nút thực hiện các hành động khác nhau trong các trường hợp khác nhau. Ngoài ra, trong các chương trình phức tạp hơn, làm sạch các trình xử lý sự kiện cũ/không sử dụng có thể cải thiện hiệu quả. The ability to add and remove event handlers allows you to, for example, have the same button performing different actions in different circumstances. In addition, in more complex programs cleaning up old/unused event handlers can improve efficiency.

Dưới đây chúng tôi chỉ ra làm thế nào một hàm

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.addEventListener('click', greet);

Phương pháp cũng có thể lấy các đối số/tùy chọn bổ sung để kiểm soát các khía cạnh của cách các sự kiện được nắm bắt và loại bỏ. Thông tin thêm có thể được tìm thấy trên trang tham chiếu

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

Sử dụng tín hiệu hủy bỏ

Một tính năng người nghe sự kiện đáng chú ý là khả năng sử dụng tín hiệu hủy bỏ để làm sạch nhiều trình xử lý sự kiện cùng một lúc.

Điều này được thực hiện bằng cách chuyển cùng một

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.addEventListener('click', greet);

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.onclick = greet;

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.addEventListener('click', greet);

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.addEventListener('click', greet);

const btn = document.querySelector('button');

function greet(event) {
  console.log('greet:', event)
}

btn.addEventListener('click', greet);

const controller = new AbortController();

btn.addEventListener('click', (event) => {
  console.log('greet:', event);
}, { signal: controller.signal }); // pass an AbortSignal to this handler

Sau đó, trình xử lý sự kiện được tạo bởi mã ở trên có thể được xóa như thế này:

controller.abort(); // removes any/all event handlers associated with this controller