วิธี dispatchEvent

วิธี dispatchEvent ช่วยให้สามารถจำลอง เหตุการณ์บนองค์ประกอบ ทำไมต้องใช้: สามารถจำลองการกด ผู้ใช้บนปุ่ม, ความพยายามในการส่ง แบบฟอร์มและอื่นๆ โดยที่เหตุการณ์จะไม่ แตกต่างจากของจริงเลยนอกจากคุณสมบัติ event.isTrusted สามารถสร้างเหตุการณ์ที่มีชื่อ ไม่มาตรฐาน (ที่คุณคิดขึ้น) และเรียกใช้ มันในเวลาที่ต้องการได้ วิธีนี้ใช้กับองค์ประกอบที่ต้องการเรียกเหตุการณ์ พารามิเตอร์ของวิธีได้รับเหตุการณ์ (อ็อบเจกต์) ที่สร้างขึ้นโดยใช้ constructor new Event

Syntax

องค์ประกอบ.dispatchEvent(เหตุการณ์);

ตัวอย่าง

สมมติว่าเรามีปุ่ม เมื่อกดปุ่มนี้ จะแสดงข้อความ มาทำให้ เมื่อเลื่อนเมาส์มาที่ปุ่ม ปุ่มนี้คิดว่ามีการคลิกที่มัน:

<button id="button">ปุ่ม</button>

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

button.addEventListener('click', function() {
	alert('ข้อความ');
});

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // สร้างเหตุการณ์
	this.dispatchEvent(clickEvent); // จำลองการคลิกบนปุ่ม
});

ตัวอย่าง

สามารถสร้างเหตุการณ์ของตัวเอง (ด้วยชื่อของตัวเอง) และเรียกใช้ในเวลาที่ต้องการได้ มาผูก เหตุการณ์ showMessage กับปุ่มและเมื่อ เลื่อนเมาส์มาที่ปุ่มก็ให้เริ่มต้นเหตุการณ์นี้:

<button id="button">ปุ่ม</button>

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

button.addEventListener('showMessage', function() {
	alert('ข้อความ');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // สร้างเหตุการณ์
	this.dispatchEvent(showMessageEvent); // เรียกการทำงานของเหตุการณ์
});