Event (เหตุการณ์) คือสัญญาณที่บ่งบอกว่ามีบางสิ่งบางอย่างเกิดขึ้น
ตัวอย่าง Event ต่างๆ ที่สร้างอยู่ใน DOM ได้แก่
click - ปุ่มอุปกรณ์ชี้ (ปุ่มใดก็ได้; เร็วๆ นี้จะเป็นปุ่มหลักอย่างเดียว) ถูกกดและปล่อยบนองค์ประกอบ
mouseover - อุปกรณ์ชี้ถูกเคลื่อนย้ายเข้าไปบนองค์ประกอบที่มี Listener ผูกอยู่ หรือบนลูกของมัน
keyup - ปุ่มใดปุ่มหนึ่งถูกปล่อย
load - ทรัพยากรและทรัพยากรที่ขึ้นอยู่กับมันโหลดเสร็จสมบูรณ์
คุณสามารถสร้าง Event ของตัวเองได้ด้วย
new Event('my-event');คุณสามารถส่ง Event เหล่านี้ไปยังองค์ประกอบโดยใช้ dispatchEvent
HTML
<div id="my-div"></div>
JS
const myDiv = document.querySelector('#my-div') myDiv.dispatchEvent(new Event('my-event'));คุณสามารถเพิ่ม Event Listeners เพื่อกำหนดว่าจะทำอะไรเมื่อได้รับ Event โดยใช้ addEventListener
HTML
<div id="my-div"></div>
JS
const myDiv = document.querySelector('#my-div') myDiv.addEventListener( // Event ที่ต้องการฟัง 'my-event', // Handler Function (e) => alert('Event fired!') ); myDiv.dispatchEvent(new Event('my-event'));การรันโค้ดข้างต้นจะผูก Event Listener เข้ากับ div ของเราที่จะฟัง Event 'my-event' เมื่อเจอ Event นี้ จะเรียก Callback function
เนื่องจากเราส่ง Event นี้ จึงจะถูกยิงทันทีและเราจะเห็น Alert box
