JavaScript HTML DOM EventListener
addEventListener() วิธีการ
ตัวอย่าง
เพิ่มตัวฟังเหตุการณ์ที่เริ่มทำงานเมื่อผู้ใช้คลิกปุ่ม:
document.getElementById("myBtn").addEventListener("click", displayDate);
วิธี การaddEventListener()
แนบตัวจัดการเหตุการณ์กับองค์ประกอบที่ระบุ
วิธี การaddEventListener()
แนบตัวจัดการเหตุการณ์กับองค์ประกอบโดยไม่ต้องเขียนทับตัวจัดการเหตุการณ์ที่มีอยู่
คุณสามารถเพิ่มตัวจัดการเหตุการณ์ได้หลายตัวในองค์ประกอบเดียว
คุณสามารถเพิ่มตัวจัดการเหตุการณ์ประเภทเดียวกันลงในองค์ประกอบเดียวได้ เช่น เหตุการณ์ "คลิก" สองเหตุการณ์
คุณสามารถเพิ่มตัวฟังเหตุการณ์ให้กับวัตถุ DOM ได้ ไม่เพียงแต่องค์ประกอบ HTML คือวัตถุหน้าต่าง
วิธีaddEventListener()
นี้ช่วยให้ควบคุมวิธีที่เหตุการณ์ตอบสนองต่อฟองสบู่ได้ง่ายขึ้น
เมื่อใช้addEventListener()
เมธอด JavaScript จะถูกแยกออกจากมาร์กอัป HTML เพื่อให้อ่านง่ายขึ้น และให้คุณเพิ่มตัวฟังเหตุการณ์ได้ แม้ว่าคุณจะไม่ได้ควบคุมมาร์กอัป HTML ก็ตาม
คุณสามารถลบตัวฟังเหตุการณ์ได้อย่างง่ายดายโดยใช้removeEventListener()
วิธีการ
ไวยากรณ์
element.addEventListener(event, function, useCapture);
พารามิเตอร์แรกคือประเภทของเหตุการณ์ (เช่น " click
" หรือ " mousedown
" หรือHTML DOM Event อื่นๆ )
พารามิเตอร์ที่สองคือฟังก์ชันที่เราต้องการเรียกใช้เมื่อมีเหตุการณ์เกิดขึ้น
พารามิเตอร์ที่สามคือค่าบูลีนที่ระบุว่าจะใช้เหตุการณ์เดือดปุด ๆ หรือการบันทึกเหตุการณ์ พารามิเตอร์นี้เป็นทางเลือก
โปรดทราบว่าคุณไม่ได้ใช้คำนำหน้า "เปิด" สำหรับกิจกรรม ใช้ " click
" แทน " onclick
"
เพิ่มตัวจัดการเหตุการณ์ให้กับ Element
ตัวอย่าง
แจ้งเตือน "สวัสดีชาวโลก!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:
element.addEventListener("click", function(){ alert("Hello World!"); });
คุณยังสามารถอ้างถึงฟังก์ชัน "ชื่อ" ภายนอก:
ตัวอย่าง
แจ้งเตือน "สวัสดีชาวโลก!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
เพิ่มตัวจัดการเหตุการณ์จำนวนมากในองค์ประกอบเดียวกัน
เมธอด นี้addEventListener()
ให้คุณเพิ่มหลายเหตุการณ์ในองค์ประกอบเดียวกัน โดยไม่ต้องเขียนทับเหตุการณ์ที่มีอยู่:
ตัวอย่าง
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
คุณสามารถเพิ่มเหตุการณ์ประเภทต่างๆ ลงในองค์ประกอบเดียวกันได้:
ตัวอย่าง
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
เพิ่ม Event Handler ไปที่หน้าต่าง Object
เมธอด นี้addEventListener()
ให้คุณเพิ่มตัวฟังเหตุการณ์บนออบเจ็กต์ HTML DOM ใดๆ เช่น อิลิเมนต์ HTML เอกสาร HTML อ็อบเจ็กต์หน้าต่าง หรืออ็อบเจ็กต์อื่นๆ ที่รองรับเหตุการณ์ เช่นxmlHttpRequest
ออบเจกต์
ตัวอย่าง
เพิ่มตัวฟังเหตุการณ์ที่เริ่มทำงานเมื่อผู้ใช้ปรับขนาดหน้าต่าง:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
ผ่านพารามิเตอร์
เมื่อส่งค่าพารามิเตอร์ ให้ใช้ "ฟังก์ชันที่ไม่ระบุชื่อ" ที่เรียกใช้ฟังก์ชันที่ระบุด้วยพารามิเตอร์:
ตัวอย่าง
element.addEventListener("click", function(){ myFunction(p1, p2); });
เหตุการณ์เดือดปุด ๆ หรือการจับภาพเหตุการณ์?
มีสองวิธีในการเผยแพร่เหตุการณ์ใน HTML DOM คือ bubbling และ capturing
การเผยแพร่เหตุการณ์เป็นวิธีกำหนดลำดับองค์ประกอบเมื่อมีเหตุการณ์เกิดขึ้น หากคุณมีองค์ประกอบ <p> ภายในองค์ประกอบ <div> และผู้ใช้คลิกที่องค์ประกอบ <p> ควรจัดการเหตุการณ์ "คลิก" ขององค์ประกอบใดก่อน
ใน การ เดือดปุด ๆเหตุการณ์ขององค์ประกอบภายในส่วนใหญ่จะได้รับการจัดการก่อนแล้วจึงค่อยจัดการภายนอก: เหตุการณ์การคลิกขององค์ประกอบ <p> จะได้รับการจัดการก่อน จากนั้นจึงจัดการเหตุการณ์การคลิกขององค์ประกอบ <div>
ในการจับภาพเหตุการณ์ขององค์ประกอบภายนอกส่วนใหญ่จะได้รับการจัดการก่อนแล้วจึงจัดการภายใน: เหตุการณ์การคลิกขององค์ประกอบ <div> จะได้รับการจัดการก่อน จากนั้นจึงจัดการเหตุการณ์การคลิกขององค์ประกอบ <p>
ด้วยเมธอด addEventListener() คุณสามารถระบุประเภทการแพร่กระจายได้โดยใช้พารามิเตอร์ "useCapture":
addEventListener(event, function, useCapture);
ค่าดีฟอลต์เป็นเท็จ ซึ่งจะใช้การแพร่กระจายที่เดือดปุด ๆ เมื่อตั้งค่าเป็นจริง เหตุการณ์จะใช้การขยายพันธุ์ที่ดักจับ
ตัวอย่าง
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
เมธอด removeEventListener()
เมธอดจะลบ ตัวremoveEventListener()
จัดการเหตุการณ์ที่แนบกับเมธอด addEventListener() ออก:
ตัวอย่าง
element.removeEventListener("mousemove", myFunction);
การอ้างอิงวัตถุเหตุการณ์ HTML DOM
สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดดูที่HTML DOM Event Object Referenceทั้งหมดของเรา