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

Một sự kiện là một tín hiệu cho thấy điều gì đó đã xảy ra.

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

• nhấp chuột - Một nút thiết bị trỏ (nút BẤT KỲ; sắp trở thành nút chính) đã được nhấn và nhả trên một phần tử.

• di chuột qua - Một thiết bị trỏ được di chuyển vào phần tử có gắn người nghe hoặc vào một trong các phần tử con của nó.

• keyup - BẤT KỲ khóa nào được phát hành

• tải - 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 của riêng mình bằng cách sử dụng -

new Event('my-event');

Bạn có thể gửi những sự kiện này trên một phần tử bằng cách sử dụ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 nghe sự kiện để xác định những việc cần làm khi nhận sự kiện bằng addEventListener -

HTML -

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

JS -

const myDiv = document.querySelector('#my-div')
myDiv.addEventListener(
   // Event for which we want to listen
   'my-event',
   // Handler Function
   (e) => alert('Event fired!')
);
myDiv.dispatchEvent(new Event('my-event'));

Việc chạy đoạn mã trên sẽ đính kèm một trình lắng nghe sự kiện vào div của chúng tôi. Nó sẽ được liệt kê vào các sự kiện sự kiện của tôi. Khi gặp sự kiện này, nó sẽ gọi hàm gọi lại.

Vì chúng tôi đang điều hành sự kiện này, sự kiệ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.