เอกสาร HTML DOM addEventListener()
ตัวอย่าง
เพิ่มเหตุการณ์การคลิกในเอกสาร:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
ไวยากรณ์ที่ง่ายกว่า:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
วิธี การaddEventListener()แนบตัวจัดการเหตุการณ์กับเอกสาร
ดูสิ่งนี้ด้วย:
บทช่วยสอน HTML DOM EventListener
เอกสาร removeEventListener() Method
ไวยากรณ์
document.addEventListener(event, function, useCapture)
พารามิเตอร์
| Parameter | Description |
| event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
| function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
| useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
คืนมูลค่า
| NONE |
ตัวอย่างเพิ่มเติม
คุณสามารถเพิ่มตัวฟังเหตุการณ์จำนวนมากให้กับเอกสารได้:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
คุณสามารถเพิ่มกิจกรรมประเภทต่างๆ ได้:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
เมื่อส่งผ่านพารามิเตอร์ ให้ใช้ "ฟังก์ชันที่ไม่ระบุชื่อ" เพื่อเรียกใช้ฟังก์ชันด้วยพารามิเตอร์:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
เปลี่ยนสีพื้นหลังของเอกสาร:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
ใช้เมธอด removeEventListener() :
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
รองรับเบราว์เซอร์
document.addEventListenerเป็นคุณลักษณะ DOM ระดับ 2 (2001)
ได้รับการสนับสนุนอย่างเต็มที่ในเบราว์เซอร์ทั้งหมด:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |