Hướng dẫn what is event in javascript - sự kiện trong javascript là gì

Các sự kiện HTML phổ biến.

Các sự kiện và trình xử lý sự kiện trong JavaScript là gì?events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. For example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. As a result, the plane can safely take off.

Người xử lý sự kiện.

Sự kiện có phải là từ khóa trong JavaScript không?

• Sau đó, nó hoạt động tốt. Kết luận của tôi là 'sự kiện' là một từ dành riêng cho đối số sự kiện trong kịch bản java.
• Người xử lý sự kiện và sự kiện là gì?
• Trong lập trình, một trình xử lý sự kiện là một thói quen gọi lại hoạt động không đồng bộ sau khi một sự kiện diễn ra. Nó ra lệnh cho hành động theo sau sự kiện. Các lập trình viên viết một mã cho hành động này diễn ra. Một sự kiện là một hành động diễn ra khi người dùng tương tác với một chương trình.
• Các sự kiện là hành động hoặc sự xuất hiện xảy ra trong hệ thống bạn đang lập trình, mà hệ thống cho bạn biết về để mã của bạn có thể phản ứng với họ.
• Ví dụ: nếu người dùng nhấp vào nút trên trang web, bạn có thể muốn phản ứng với hành động đó bằng cách hiển thị hộp thông tin. Trong bài viết này, chúng tôi thảo luận về một số khái niệm quan trọng xung quanh các sự kiện và xem cách chúng hoạt động trong các trình duyệt. Đây sẽ không phải là một nghiên cứu đầy đủ; Chỉ là những gì bạn cần biết ở giai đoạn này.
• Một loạt các sự kiện may mắn
• Như đã đề cập ở trên, các sự kiện là hành động hoặc sự xuất hiện xảy ra trong hệ thống bạn đang lập trình - hệ thống tạo ra (hoặc "hỏa hoạn") một tín hiệu nào đó khi xảy ra sự kiện và cung cấp một cơ chế mà hành động có thể được thực hiện tự động ( nghĩa là, một số mã chạy) khi sự kiện xảy ra. Ví dụ, trong một sân bay, khi đường băng rõ ràng để cất cánh, một tín hiệu được truyền đạt tới phi công. Kết quả là, máy bay có thể cất cánh một cách an toàn.

Trong trường hợp của web, các sự kiện được bắn vào bên trong cửa sổ trình duyệt và có xu hướng được gắn vào một mục cụ thể nằm trong đó. Đây có thể là một phần tử duy nhất, một tập hợp các phần tử, tài liệu HTML được tải trong tab hiện tại hoặc toàn bộ cửa sổ trình duyệt. Có nhiều loại sự kiện khác nhau có thể xảy ra.a lot of events that can be fired.

Ví dụ:event handler to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires. When such a block of code is defined to run in response to an event, we say we are registering an event handler. Note: Event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.

Lưu ý: Các sự kiện web không phải là một phần của ngôn ngữ JavaScript cốt lõi - chúng được định nghĩa là một phần của API được tích hợp trong trình duyệt. Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.

Một ví dụ đơn giản

Chúng ta hãy xem một ví dụ đơn giản về những gì chúng ta muốn nói ở đây. Trong ví dụ sau, chúng tôi có một

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

<button>Change colorbutton>

JavaScript trông giống như vậy:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Trong mã này, chúng tôi lưu trữ một tham chiếu đến phần tử

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Chúng tôi cũng xác định một hàm trả về một số ngẫu nhiên.

Phần thứ ba của mã là nơi chúng tôi xác định và đăng ký trình xử lý sự kiện. Phần tử

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

• Chuỗi

  btn.removeEventListener('click', changeBackground);
  

  0, để cho biết rằng chúng tôi muốn nghe sự kiện nhấp chuột
• một chức năng để gọi khi sự kiện xảy ra. Trong trường hợp của chúng tôi, hàm tạo màu RGB ngẫu nhiên và đặt trang

  btn.removeEventListener('click', changeBackground);
  

  4

  btn.removeEventListener('click', changeBackground);
  

  5 bằng màu đó.

Đầu ra ví dụ như sau. Thử nhấp vào nút:

Nó không chỉ là các trang web

Các sự kiện không phải là duy nhất đối với JavaScript - hầu hết các ngôn ngữ lập trình đều có một số loại mô hình sự kiện và cách thức hoạt động của mô hình thường khác với cách của JavaScript. Trên thực tế, mô hình sự kiện trong JavaScript cho các trang web khác với mô hình sự kiện cho JavaScript vì nó được sử dụng trong các môi trường khác.

Ví dụ: Node.js là một thời gian chạy JavaScript rất phổ biến cho phép các nhà phát triển sử dụng JavaScript để xây dựng các ứng dụng phía máy chủ và mạng. Mô hình sự kiện Node.js dựa vào người nghe để lắng nghe các sự kiện và phát các sự kiện phát ra định kỳ - nó không có vẻ khác, nhưng mã hoàn toàn khác, sử dụng các chức năng như

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

Bạn cũng có thể sử dụng JavaScript để xây dựng các tiện ích bổ sung trình duyệt chéo-cải tiến chức năng trình duyệt-sử dụng công nghệ gọi là Webextensions. Mô hình sự kiện tương tự như mô hình sự kiện web, nhưng một chút khác nhau-các thuộc tính của người nghe sự kiện được đúc lạc đà (như

btn.removeEventListener('click', changeBackground);

btn.removeEventListener('click', changeBackground);

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

Bạn không cần phải hiểu bất cứ điều gì về các môi trường khác như vậy ở giai đoạn này trong việc học của bạn; Chúng tôi chỉ muốn làm rõ rằng các sự kiện có thể khác nhau trong các môi trường lập trình khác nhau.

Sử dụng addEventListener ()

Cơ chế được đề xuất để thêm trình xử lý sự kiện trong các trang web là phương thức

btn.removeEventListener('click', changeBackground);

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bên trong hàm

btn.removeEventListener('click', changeBackground);

Bạn có thể biến hàm xử lý thành một hàm được đặt tên riêng biệt, như thế này:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Nghe các sự kiện khác

Có nhiều sự kiện khác nhau có thể được bắn bởi một yếu tố nút. Hãy thử nghiệm.

Đầu tiên, tạo một bản sao cục bộ của màu ngẫu nhiên-addeventlistener.html và mở nó trong trình duyệt của bạn. Nó chỉ là một bản sao của ví dụ màu ngẫu nhiên đơn giản mà chúng tôi đã chơi. Bây giờ, hãy thử thay đổi

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

• const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  5 và

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  6 - Màu sắc thay đổi khi nút được tập trung và không tập trung; Hãy thử nhấn Tab để tập trung vào nút và nhấn lại tab để tập trung ra khỏi nút. Chúng thường được sử dụng để hiển thị thông tin về việc điền vào các trường biểu mẫu khi chúng được tập trung hoặc để hiển thị thông báo lỗi nếu trường biểu mẫu được lấp đầy bằng giá trị không chính xác.

• const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  7-Màu chỉ thay đổi khi nút nhấp đúp.

• const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  8 và

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  9 - Màu sắc thay đổi khi con trỏ chuột di chuyển qua nút hoặc khi con trỏ di chuyển khỏi nút, tương ứng.

Một số sự kiện, chẳng hạn như

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

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

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

Loại bỏ người nghe

Nếu bạn đã thêm một trình xử lý sự kiện bằng cách sử dụng

btn.removeEventListener('click', changeBackground);

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

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

btn.removeEventListener('click', changeBackground);

Người xử lý sự kiện cũng có thể được xóa bằng cách chuyển một

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

btn.removeEventListener('click', changeBackground);

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

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

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

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { 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

Đối với các chương trình đơn giản, nhỏ, làm sạch các trình xử lý sự kiện cũ, không sử dụng không cần thiết, nhưng đối với các chương trình lớn hơn, phức tạp hơn, nó có thể cải thiện hiệu quả. Ngoài ra, khả năng 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: tất cả những gì bạn phải làm là thêm hoặc xóa trình xử lý.

Thêm nhiều người nghe cho một sự kiện duy nhất

Bằng cách thực hiện nhiều hơn một cuộc gọi đến

btn.removeEventListener('click', changeBackground);

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

Cả hai chức năng bây giờ sẽ chạy khi phần tử được nhấp.

Tìm hiểu thêm

Có các tính năng và tùy chọn mạnh mẽ khác có sẵn với

btn.removeEventListener('click', changeBackground);

Đây là một chút phạm vi cho bài viết này, nhưng nếu bạn muốn đọc chúng, hãy truy cập các trang tham khảo

btn.removeEventListener('click', changeBackground);

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

Các cơ chế nghe sự kiện khác

Chúng tôi khuyên bạn nên sử dụng

btn.removeEventListener('click', changeBackground);

Thuộc tính xử lý sự kiện

Các đối tượng (như các nút) có thể bắn các sự kiện cũng thường có các thuộc tính có tên là

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Ví dụ: chúng ta có thể viết lại ví dụ màu ngẫu nhiên như thế này:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Bạn cũng có thể đặt thuộc tính Handler thành một hàm được đặt tên:

<button>Change colorbutton>

Với các thuộc tính xử lý sự kiện, bạn không thể thêm nhiều hơn một trình xử lý cho một sự kiện. Ví dụ: bạn có thể gọi

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

<button>Change colorbutton>

Điều này là không thể với các thuộc tính xử lý sự kiện vì bất kỳ nỗ lực tiếp theo nào để đặt tài sản sẽ ghi đè lên các thuộc tính trước đó:

<button>Change colorbutton>

Trình xử lý sự kiện nội tuyến - không sử dụng những điều này

Bạn cũng có thể thấy một mẫu như thế này trong mã của bạn:

<button>Change colorbutton>

<button>Change colorbutton>

Phương pháp sớm nhất để đăng ký Trình xử lý sự kiện được tìm thấy trên web liên quan đến các thuộc tính HTML xử lý sự kiện (hoặc trình xử lý sự kiện nội tuyến) như được hiển thị ở trên - giá trị thuộc tính theo nghĩa đen là mã JavaScript bạn muốn chạy khi sự kiện xảy ra. Ví dụ: ví dụ: gọi một hàm được xác định bên trong phần tử

myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);

<button>Change colorbutton>

Bạn có thể tìm thấy các thuộc tính HTML tương đương cho nhiều thuộc tính xử lý sự kiện; Tuy nhiên, bạn không nên sử dụng những thứ này - chúng được coi là thực hành xấu. Có vẻ dễ dàng sử dụng thuộc tính xử lý sự kiện nếu bạn đang làm điều gì đó thực sự nhanh chóng, nhưng chúng nhanh chóng trở nên không thể quản lý và không hiệu quả.

Để bắt đầu, không phải là một ý tưởng tốt để trộn HTML và JavaScript của bạn, vì nó trở nên khó đọc. Giữ JavaScript của bạn riêng biệt là một thực tiễn tốt và nếu nó nằm trong một tệp riêng, bạn có thể áp dụng nó cho nhiều tài liệu HTML.

Ngay cả trong một tệp duy nhất, trình xử lý sự kiện nội tuyến không phải là một ý tưởng tốt. Một nút là OK, nhưng nếu bạn có 100 nút thì sao? Bạn phải thêm 100 thuộc tính vào tệp; Nó sẽ nhanh chóng biến thành một cơn ác mộng bảo trì. Với JavaScript, bạn có thể dễ dàng thêm chức năng xử lý sự kiện vào tất cả các nút trên trang cho dù có bao nhiêu, sử dụng một cái gì đó như thế này:

<button>Change colorbutton>

Cuối cùng, nhiều cấu hình máy chủ phổ biến sẽ không cho phép JavaScript nội tuyến, như một biện pháp bảo mật.

Bạn không bao giờ nên sử dụng các thuộc tính xử lý sự kiện HTML - những thuộc tính đã lỗi thời và sử dụng chúng là thực tế xấu. — those are outdated, and using them is bad practice.

Đối tượng sự kiện

Đôi khi, bên trong hàm xử lý sự kiện, bạn sẽ thấy một tham số được chỉ định với một tên như

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

<button>Change colorbutton>

Ở đây bạn có thể thấy chúng ta bao gồm một đối tượng sự kiện, E, trong hàm và trong hàm đặt kiểu màu nền trên

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Lưu ý: Xem phần Phái đoàn sự kiện bên dưới để biết ví dụ mà chúng tôi sử dụng

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Lưu ý: Bạn có thể sử dụng bất kỳ tên nào bạn thích cho đối tượng sự kiện - bạn chỉ cần chọn một tên mà sau đó bạn có thể sử dụng để tham khảo nó bên trong chức năng xử lý sự kiện. ________ 92/________ 91/________ 90 được các nhà phát triển sử dụng phổ biến nhất vì chúng ngắn và dễ nhớ. Luôn luôn tốt để nhất quán - với chính bạn và với người khác nếu có thể. You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function.

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

Ngăn chặn hành vi mặc định

Đôi khi, bạn sẽ gặp phải một tình huống mà bạn muốn ngăn chặn một sự kiện làm những gì nó làm theo mặc định. Ví dụ, ví dụ như mẫu web của một biểu mẫu web. Khi bạn điền vào chi tiết và nhấp vào nút Gửi, hành vi tự nhiên là để dữ liệu được gửi đến một trang được chỉ định trên máy chủ để xử lý và trình duyệt sẽ được chuyển hướng đến một trang "thông báo thành công" của một số loại (hoặc một số loại (hoặc Cùng một trang, nếu một trang khác không được chỉ định).

Rắc rối xảy ra khi người dùng chưa gửi chính xác dữ liệu - với tư cách là nhà phát triển, bạn muốn ngăn việc gửi lên máy chủ và đưa ra thông báo lỗi cho biết những gì sai và những gì cần phải làm để đặt mọi thứ đúng. Một số trình duyệt hỗ trợ các tính năng xác thực dữ liệu biểu mẫu tự động, nhưng vì nhiều người không nên, bạn nên không dựa vào chúng và thực hiện kiểm tra xác thực của riêng bạn. Hãy xem xét một ví dụ đơn giản.

Đầu tiên, một biểu mẫu HTML đơn giản yêu cầu bạn nhập họ và họ đầu tiên:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bây giờ một số JavaScript - ở đây chúng tôi thực hiện kiểm tra rất đơn giản bên trong một trình xử lý cho sự kiện ____104 (sự kiện gửi được bắn trên một biểu mẫu khi nó được gửi) kiểm tra xem các trường văn bản có trống không. Nếu có, chúng tôi gọi hàm

<button>Change colorbutton>

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Rõ ràng, đây là xác thực hình thức khá yếu - nó sẽ không ngăn người dùng xác thực biểu mẫu với khoảng trống hoặc số được nhập vào các trường, ví dụ - nhưng nó ổn, ví dụ như mục đích. Đầu ra như sau:

Sự kiện sủi bọt và bắt giữ

Sự kiện sủi bọt và chụp là các thuật ngữ mô tả các giai đoạn trong cách trình duyệt xử lý các sự kiện nhắm vào các yếu tố lồng nhau.

Đặt trình nghe trên phần tử cha mẹ

Hãy xem xét một trang web như thế này:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Ở đây, nút nằm trong một phần tử khác, một phần tử

<button>Change colorbutton>

<button>Change colorbutton>

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bạn sẽ thấy rằng cha mẹ bắn một sự kiện nhấp chuột khi người dùng nhấp vào nút:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Điều này có ý nghĩa: nút nằm bên trong

<button>Change colorbutton>

Ví dụ sủi bọt

Điều gì xảy ra nếu chúng ta thêm người nghe sự kiện vào nút và cha mẹ?

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Hãy thử thêm trình xử lý sự kiện nhấp vào nút, cha mẹ của nó (

<button>Change colorbutton>

btn.removeEventListener('click', changeBackground);

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bạn sẽ thấy rằng cả ba yếu tố sẽ kích hoạt sự kiện nhấp chuột khi người dùng nhấp vào nút:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Trong trường hợp này:

• Nhấp vào nút Fires Fires trước
• theo sau là nhấp vào cha mẹ của nó (phần tử

  <button>Change colorbutton>
  

  06)
• theo sau là cha mẹ của phần tử

  <button>Change colorbutton>
  

  06 (phần tử

  btn.removeEventListener('click', changeBackground);
  

  4).

Chúng tôi mô tả điều này bằng cách nói rằng sự kiện này bong bóng từ phần tử trong cùng được nhấp.bubbles up from the innermost element that was clicked.

Hành vi này có thể hữu ích và cũng có thể gây ra những vấn đề bất ngờ. Trong phần tiếp theo, chúng ta sẽ thấy một vấn đề mà nó gây ra và tìm giải pháp.

Ví dụ trình phát video

Mở ra ví dụ Show-Video-Box.html trong một tab mới (và mã nguồn trong một tab khác.) Nó cũng có sẵn trực tiếp bên dưới:

Ví dụ này cho thấy và ẩn một

<button>Change colorbutton>

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

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Khi nhấp vào

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

<button>Change colorbutton>

<button>Change colorbutton>

<button>Change colorbutton>

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Sau đó, chúng tôi thêm một vài trình xử lý sự kiện

const controller = new AbortController();

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}, { signal: controller.signal }); // pass an AbortSignal to this handler

<button>Change colorbutton>

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

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bây giờ, khi khu vực của

<button>Change colorbutton>

Nhưng có một vấn đề - hiện tại, khi bạn nhấp vào video, nó bắt đầu phát, nhưng nó khiến

<button>Change colorbutton>

<button>Change colorbutton>

Sủi bọt và bắt giữ giải thích

Khi một sự kiện được bắn vào một yếu tố có các yếu tố cha mẹ (trong trường hợp này,

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

<button>Change colorbutton>

Trong giai đoạn bắt giữ:capturing phase:

• Trình duyệt kiểm tra xem liệu tổ tiên nhiều nhất của phần tử (

  <button>Change colorbutton>
  

  28) có trình xử lý sự kiện

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  4 được đăng ký trên nó cho giai đoạn bắt giữ và chạy nó nếu vậy.
• Sau đó, nó chuyển sang phần tử tiếp theo bên trong

  <button>Change colorbutton>
  

  28 và làm điều tương tự, sau đó là phần tiếp theo, và cứ thế cho đến khi nó đến được cha mẹ trực tiếp của phần tử thực sự được nhấp.

Trong giai đoạn mục tiêu:target phase:

• Trình duyệt kiểm tra xem thuộc tính

  const btn = document.querySelector('button');
  
  function random(number) {
    return Math.floor(Math.random() * (number+1));
  }
  
  btn.onclick = () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }
  

  4 có xử lý sự kiện cho sự kiện

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  4 được đăng ký trên đó không và chạy nó nếu vậy.
• Sau đó, nếu

  <button>Change colorbutton>
  

  33 là

  <button>Change colorbutton>
  

  34, nó sẽ truyền bá sự kiện đến cha mẹ trực tiếp của phần tử đã nhấp, sau đó là phần tiếp theo, v.v. cho đến khi nó đạt đến phần tử

  <button>Change colorbutton>
  

  28. Mặt khác, nếu

  <button>Change colorbutton>
  

  33 là

  <button>Change colorbutton>
  

  37, nó sẽ không tuyên truyền sự kiện đến bất kỳ tổ tiên nào của mục tiêu.

Trong giai đoạn sủi bọt, điều ngược lại hoàn toàn với giai đoạn bắt giữ xảy ra:bubbling phase, the exact opposite of the capturing phase occurs:

• Trình duyệt kiểm tra xem cha mẹ trực tiếp của phần tử được nhấp có được xử lý sự kiện

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  4 được đăng ký trên nó cho giai đoạn sủi bọt và chạy nó nếu vậy.
• Sau đó, nó chuyển sang phần tử tổ tiên ngay lập tức tiếp theo và làm điều tương tự, sau đó là phần tiếp theo, v.v. cho đến khi nó đạt đến yếu tố

  <button>Change colorbutton>
  

  28.

Trong các trình duyệt hiện đại, theo mặc định, tất cả các trình xử lý sự kiện được đăng ký cho giai đoạn sủi bọt. Vì vậy, trong ví dụ hiện tại của chúng tôi, khi bạn nhấp vào video, sự kiện bong bóng từ phần tử

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

<button>Change colorbutton>

• Nó tìm thấy trình xử lý

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  4 trên phần tử

  <button>Change colorbutton>
  

  43 và chạy nó, vì vậy video đầu tiên bắt đầu phát.
• Sau đó, nó tìm thấy trình xử lý

  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
    document.body.style.backgroundColor = rndCol;
  }, { signal: controller.signal }); // pass an AbortSignal to this handler
  

  4 trên phần tử

  <button>Change colorbutton>
  

  45 và chạy điều đó, vì vậy video cũng được ẩn.

Lưu ý: Tất cả các sự kiện JavaScript đều trải qua các giai đoạn chụp và mục tiêu. Liệu một sự kiện có đi vào giai đoạn sủi bọt có thể được kiểm tra bởi thuộc tính

<button>Change colorbutton>

<button>Change colorbutton>

Lưu ý: Người nghe sự kiện đã đăng ký cho phần tử

<button>Change colorbutton>

<button>Change colorbutton>

<button>Change colorbutton>

<button>Change colorbutton>

<button>Change colorbutton>

<button>Change colorbutton>

Ví dụ sau đây cho thấy hành vi được mô tả ở trên. Di chuột qua các số và nhấp vào chúng để kích hoạt các sự kiện, sau đó quan sát đầu ra được ghi lại.

Mã ví dụ: Các giai đoạn sự kiện

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Khắc phục sự cố với StopPropagation ()

Như chúng ta đã thấy trong ví dụ video, đây có thể là một hành vi rất khó chịu, nhưng có một cách để ngăn chặn nó! Đối tượng

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

<button>Change colorbutton>

Vì vậy, chúng tôi có thể khắc phục sự cố hiện tại của mình bằng cách thay đổi chức năng xử lý thứ hai trong khối mã trước đó thành điều này:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bạn có thể thử tạo một bản sao cục bộ của mã nguồn show-video-box.html và tự sửa nó hoặc xem kết quả cố định trong show-video-box-fixed.html (cũng xem mã nguồn ở đây).

Lưu ý: Tại sao phải bận tâm với cả việc bắt giữ và sủi bọt? Chà, trong những ngày xưa tồi tệ khi các trình duyệt ít tương thích với nhau hơn so với hiện tại, Netscape chỉ sử dụng sự kiện chụp và Internet Explorer chỉ sử dụng sủi bọt sự kiện. Khi W3C quyết định cố gắng chuẩn hóa hành vi và đạt được sự đồng thuận, họ đã kết thúc với hệ thống này bao gồm cả hai, đó là một trình duyệt hiện đại được thực hiện. Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

Lưu ý: Như đã đề cập ở trên, theo mặc định, hầu hết tất cả các trình xử lý sự kiện đều được đăng ký trong giai đoạn sủi bọt và điều này có ý nghĩa hơn trong hầu hết thời gian. Nếu bạn thực sự muốn đăng ký một sự kiện trong giai đoạn bắt giữ, bạn có thể làm như vậy bằng cách đăng ký trình xử lý của mình bằng

btn.removeEventListener('click', changeBackground);

<button>Change colorbutton>

btn.removeEventListener('click', changeBackground);

<button>Change colorbutton>

Phái đoàn sự kiện

Mặc dù vậy, sự kiện không chỉ gây phiền nhiễu: nó có thể rất hữu ích. Cụ thể, nó cho phép một thực hành gọi là Phái đoàn sự kiện. Trong thực tế này, khi chúng tôi muốn một số mã chạy khi người dùng tương tác với bất kỳ một trong số lượng lớn các yếu tố con Đặt người nghe sự kiện trên mỗi đứa trẻ.event delegation. In this practice, when we want some code to run when the user interacts with any one of a large number of child elements, we set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually.

Hãy quay lại ví dụ đầu tiên của chúng tôi, nơi chúng tôi đặt màu nền của toàn bộ trang khi người dùng nhấp vào nút. Thay vào đó, giả sử rằng trang được chia thành 16 gạch và chúng tôi muốn đặt từng ô thành một màu ngẫu nhiên khi người dùng nhấp vào gạch đó.

Đây là HTML:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Chúng tôi có một chút CSS, để đặt kích thước và vị trí của gạch:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.addEventListener('click', () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

Bây giờ trong JavaScript, chúng tôi có thể thêm một trình xử lý sự kiện nhấp chuột cho mỗi ô. Nhưng một tùy chọn đơn giản và hiệu quả hơn nhiều là đặt trình xử lý sự kiện nhấp vào cha mẹ và dựa vào sự kiện sự kiện để đảm bảo rằng trình xử lý được thực thi khi người dùng nhấp vào gạch:

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', changeBackground);

Đầu ra như sau (thử nhấp vào trên đó):

Lưu ý: Trong ví dụ này, chúng tôi đang sử dụng

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

<button>Change colorbutton>

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

function random(number) {
  return Math.floor(Math.random() * (number+1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

<button>Change colorbutton>

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Để xác minh bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra các kỹ năng của bạn: Sự kiện.

Sự kết luận

Bây giờ bạn nên biết tất cả những gì bạn cần biết về các sự kiện web ở giai đoạn đầu này. Như đã đề cập, các sự kiện không thực sự là một phần của JavaScript cốt lõi - chúng được xác định trong các API Web của Trình duyệt.

Ngoài ra, điều quan trọng là phải hiểu rằng các bối cảnh khác nhau trong đó JavaScript được sử dụng có các mô hình sự kiện khác nhau-từ API Web đến các lĩnh vực khác như trình duyệt Webextensions và Node.js (JavaScript phía máy chủ). Chúng tôi không mong đợi bạn hiểu tất cả các lĩnh vực này bây giờ, nhưng nó chắc chắn giúp hiểu được những điều cơ bản của các sự kiện khi bạn tiến lên phía trước với việc học phát triển web.

Nếu có bất cứ điều gì bạn không hiểu, vui lòng đọc lại bài viết hoặc liên hệ với chúng tôi để yêu cầu giúp đỡ.

Xem thêm

• DOMEVENT.DEV - Một ứng dụng sân chơi tương tác rất hữu ích cho phép tìm hiểu về hành vi của hệ thống sự kiện DOM thông qua thăm dò.
• Tham khảo sự kiện
• Thứ tự sự kiện (thảo luận về việc bắt giữ và sủi bọt)-một tác phẩm chi tiết xuất sắc của Peter-Paul Koch.
• Truy cập sự kiện (thảo luận về đối tượng sự kiện)-Một tác phẩm chi tiết xuất sắc khác của Peter-Paul Koch.

• Trước
• Tổng quan: Khối xây dựng
• Tiếp theo

Trong mô -đun này