องค์ประกอบ HTML DOM addEventListener()
ตัวอย่าง
เพิ่มเหตุการณ์คลิกให้กับองค์ประกอบ <button>:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
รหัสกระชับมากขึ้น:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
วิธี การaddEventListener()
แนบตัวจัดการเหตุการณ์กับองค์ประกอบ
ดูสิ่งนี้ด้วย:
Element.removeEventListener() Method
document.addEventListener() Method
document.removeEventListener() Method
บทช่วยสอน
ไวยากรณ์
element.addEventListener(event, function, useCapture)
พารามิเตอร์
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
คืนมูลค่า
ไม่มี |
ตัวอย่างเพิ่มเติม
คุณสามารถเพิ่มหลายเหตุการณ์ในองค์ประกอบเดียวกันได้:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
คุณสามารถเพิ่มเหตุการณ์ต่างๆ ให้กับองค์ประกอบเดียวกันได้:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
หากต้องการส่งค่าพารามิเตอร์ ให้ใช้ "ฟังก์ชันที่ไม่ระบุชื่อ":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
เปลี่ยนสีพื้นหลังของ <button> องค์ประกอบ:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
ความแตกต่างระหว่างการเดือดปุด ๆ และการจับภาพ:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
ลบตัวจัดการเหตุการณ์:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
รองรับเบราว์เซอร์
element.addEventListener()
เป็นคุณลักษณะ DOM ระดับ 2 (2001)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |