เหตุการณ์คือสัญญาณว่ามีบางอย่างเกิดขึ้น
ตัวอย่างเช่น เหตุการณ์ในตัวบางเหตุการณ์ใน DOM คือ −
-
คลิก − มีการกดและปล่อยปุ่มอุปกรณ์ชี้ตำแหน่ง (ปุ่มใดๆ จะเป็นปุ่มหลักเท่านั้น) ในเร็วๆ นี้แล้ว
-
เมาส์โอเวอร์ − อุปกรณ์ชี้ตำแหน่งถูกย้ายไปยังองค์ประกอบที่มีผู้ฟังติดอยู่หรือไปที่ลูกของมัน
-
คีย์เวิร์ด − คีย์ใด ๆ ถูกปล่อยออก
-
โหลด − ทรัพยากรและทรัพยากรที่ต้องพึ่งพาได้โหลดเสร็จแล้ว
คุณสามารถสร้างกิจกรรมของคุณเองโดยใช้ -
new Event('my-event'); คุณสามารถส่งเหตุการณ์เหล่านี้ไปยังองค์ประกอบโดยใช้ dispatchEvent -
HTML −
<div id="my-div"></div>
JS −
const myDiv = document.querySelector('#my-div')
myDiv.dispatchEvent(new Event('my-event')); คุณสามารถเพิ่มตัวฟังเหตุการณ์เพื่อกำหนดสิ่งที่ต้องทำในการรับเหตุการณ์โดยใช้ 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')); การเรียกใช้โค้ดด้านบนจะแนบตัวฟังเหตุการณ์เข้ากับ div ของเราที่จะรับฟังเหตุการณ์ my-event เมื่อเจอเหตุการณ์นี้จะเรียกฟังก์ชันเรียกกลับ
เนื่องจากเรากำลังส่งกิจกรรมนี้ กิจกรรมจะถูกไล่ออกทันทีและเราจะเห็นช่องแจ้งเตือน
