Giới thiệu về sự kiện trình duyệt trong JavaScript

Sự kiện (event) là tín hiệu cho biết có điều gì đó đã xảy ra.

Ví dụ, một số sự kiện tích hợp sẵn trong DOM:

• click – Nút thiết bị trỏ (BẤT KỲ nút nào; sắp tới chỉ nút chính) được nhấn và thả trên một phần tử.
• mouseover – Thiết bị trỏ được di chuyển lên phần tử có listener gắn liền hoặc lên một trong các phần tử con của nó.
• keyup – BẤT KỲ phím nào được thả ra.
• load – Một tài nguyên và các tài nguyên phụ thuộc của nó đã tải xong.

Bạn có thể tạo sự kiện tùy chỉnh bằng:

new Event('my-event');

Bạn có thể phát sự kiện này trên một phần tử bằng dispatchEvent:

HTML

<div id="my-div"></div>

JS

const myDiv = document.querySelector('#my-div');
myDiv.dispatchEvent(new Event('my-event'));

Bạn có thể thêm trình lắng nghe sự kiện để định nghĩa hành động khi nhận sự kiện bằng addEventListener:

HTML

<div id="my-div"></div>

JS

const myDiv = document.querySelector('#my-div');
myDiv.addEventListener(
  // Sự kiện muốn lắng nghe
  'my-event',
  // Hàm xử lý
  (e) => alert('Event fired!')
);
myDiv.dispatchEvent(new Event('my-event'));

Chạy mã trên sẽ gắn một event listener vào div để lắng nghe sự kiện my-event. Khi gặp sự kiện này, nó sẽ gọi hàm callback. Vì chúng ta đang dispatch sự kiện này, nó sẽ được kích hoạt ngay lập tức và chúng ta sẽ thấy hộp cảnh báo.