ตัวอย่าง
แนบเหตุการณ์คลิกเอกสาร เมื่อผู้ใช้คลิกที่ใดก็ได้ในเอกสารส่งออก "Hello World" ใน <p> องค์ประกอบที่มี id = "สาธิต":
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
document. addEventListener() document. addEventListener() วิธีการแนบตัวจัดการเหตุการณ์เอกสาร
เคล็ดลับ: ใช้ เอกสาร removeEventListener() วิธีการที่จะเอาตัวจัดการเหตุการณ์ที่ได้รับที่แนบมากับ addEventListener() วิธีการ
เคล็ดลับ: ใช้ องค์ประกอบ addEventListener() วิธีการที่จะแนบตัวจัดการเหตุการณ์ที่จะเป็นองค์ประกอบที่ระบุ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
หมายเหตุ: addEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และรุ่นก่อนหน้าและ Opera 6.0 และรุ่นก่อนหน้า แต่สำหรับเหล่านี้รุ่นเบราว์เซอร์ที่เฉพาะเจาะจงคุณสามารถใช้ attachEvent() วิธีการที่จะแนบตัวจัดการเหตุการณ์ (see "More Examples" below for a cross-browser solution)
วากยสัมพันธ์
document.addEventListener( event , function ,
useCapture )
ค่าพารามิเตอร์
| พารามิเตอร์ | ลักษณะ |
|---|---|
| event | จำเป็นต้องใช้ เชือกที่ระบุชื่อของเหตุการณ์ที่เกิดขึ้น หมายเหตุ: อย่าใช้ "on" คำนำหน้า ตัวอย่างเช่นใช้ "click" แทน "onclick" สำหรับรายชื่อของกิจกรรมทั้งหมดของ HTML DOM ให้ดูที่สมบูรณ์ของเรา HTML DOM เหตุการณ์อ้างอิงวัตถุ |
| function | จำเป็นต้องใช้ ระบุฟังก์ชันการทำงานเมื่อมีเหตุการณ์เกิดขึ้น เมื่อเหตุการณ์เกิดขึ้นวัตถุเหตุการณ์ถูกส่งผ่านไปยังฟังก์ชั่นเป็นพารามิเตอร์แรก ประเภทของวัตถุเหตุการณ์ขึ้นอยู่กับเหตุการณ์ที่ระบุ ยกตัวอย่างเช่น "click" เหตุการณ์เป็นวัตถุ MouseEvent |
| useCapture | ไม่จำเป็น. ค่าบูลีนที่ระบุว่าเหตุการณ์ที่เกิดขึ้นควรจะดำเนินการในการจับหรือในขั้นตอนการเดือด ค่าที่เป็นไปได้:
|
รายละเอียดทางเทคนิค
| DOM เวอร์ชัน: | ระดับ DOM 2 เหตุการณ์ |
|---|---|
| กลับค่า: | ไม่มีค่าตอบแทน |
| การเปลี่ยนแปลง: | พารามิเตอร์ useCapture กลายเป็นตัวเลือกใน Firefox 6 และ Opera 11.60 (has always been optional for Chrome, IE and Safari) |
ตัวอย่างอื่น ๆ
ตัวอย่าง
นอกจากนี้คุณยังสามารถดูภายนอก "named" ฟังก์ชั่น:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
ลองตัวเอง» ตัวอย่าง
คุณสามารถเพิ่มหลายเหตุการณ์เอกสารโดยไม่เขียนทับเหตุการณ์ที่มีอยู่
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มสองเหตุการณ์คลิกเอกสาร:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); ลองตัวเอง» ตัวอย่าง
คุณสามารถเพิ่มกิจกรรมที่แตกต่างกันไปยังเอกสาร
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะเพิ่มกิจกรรมมากมายที่จะเอกสาร:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); ลองตัวเอง» ตัวอย่าง
เมื่อผ่านค่าพารามิเตอร์ให้ใช้ "anonymous function" ที่เรียกฟังก์ชั่นระบุมีพารามิเตอร์:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); ลองตัวเอง» ตัวอย่าง
เปลี่ยนสีพื้นหลังของเอกสาร <body> องค์ประกอบ:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); ลองตัวเอง» ตัวอย่าง
ใช้ removeEventListener() วิธีการที่จะเอาตัวจัดการเหตุการณ์ที่ได้รับที่แนบมากับ addEventListener() วิธีการ:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); ลองตัวเอง» ตัวอย่าง
เบราว์เซอร์ที่ไม่สนับสนุน addEventListener() วิธีการที่คุณสามารถใช้ attachEvent() วิธีการ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแก้ปัญหาเบราว์เซอร์:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา JavaScript: HTML DOM EventListener
HTML DOM อ้างอิง: องค์ประกอบ addEventListener()