Phương thức dispatchEvent

Phương thức dispatchEvent cho phép mô phỏng một sự kiện trên phần tử. Tại sao cần điều này: bạn có thể mô phỏng việc người dùng nhấn vào một nút, cố gắng gửi một biểu mẫu và hơn thế nữa. Sự kiện này sẽ không khác gì so với sự kiện thật ngoại trừ thuộc tính event.isTrusted. Bạn thậm chí có thể tạo các sự kiện với tên không chuẩn (do bạn nghĩ ra) và sau đó kích hoạt chúng vào thời điểm thích hợp. Phương thức được áp dụng cho phần tử cần kích hoạt sự kiện. Tham số của phương thức nhận một sự kiện (đối tượng), được tạo bằng cách sử dụng hàm tạo new Event.

Cú pháp

phần_tử.dispatchEvent(sự_kiện);

Ví dụ

Giả sử chúng ta có một nút bấm. Khi nhấn vào nút này, một thông báo sẽ được hiển thị. Hãy làm sao để khi di chuột qua nút, nút đó nghĩ rằng nó đã được nhấp:

<button id="button">nút bấm</button>

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('thông báo');
});

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // tạo sự kiện
	this.dispatchEvent(clickEvent); // mô phỏng nhấp chuột vào nút
});

Ví dụ

Bạn có thể tạo các sự kiện của riêng mình (với tên riêng) và sau đó kích hoạt chúng vào thời điểm thích hợp. Hãy gán sự kiện showMessage vào nút bấm và khi di chuột qua, khởi tạo sự kiện này:

<button id="button">nút bấm</button>

let button = document.querySelector('#button');

button.addEventListener('showMessage', function() {
	alert('thông báo');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // tạo sự kiện
	this.dispatchEvent(showMessageEvent); // kích hoạt sự kiện
});