ตัวอย่าง
แนบเหตุการณ์คลิกไปยัง <button> องค์ประกอบ เมื่อผู้ใช้คลิกที่ปุ่มเอาท์พุท "Hello World" ใน <p> องค์ประกอบที่มี id = "สาธิต":
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
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)
วากยสัมพันธ์
element .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" ฟังก์ชั่น
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการดำเนินการการทำงานเมื่อผู้ใช้คลิกที่ <button> องค์ประกอบ:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
ลองตัวเอง» ตัวอย่าง
คุณสามารถเพิ่มกิจกรรมมากมายกับองค์ประกอบเดียวกันโดยไม่เขียนทับเหตุการณ์ที่มีอยู่
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มสองเหตุการณ์คลิกที่เดียวกัน <button> องค์ประกอบ:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); ลองตัวเอง» ตัวอย่าง
คุณสามารถเพิ่มกิจกรรมที่แตกต่างกันกับองค์ประกอบเดียวกัน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มหลายเหตุการณ์ที่เดียวกัน <button> องค์ประกอบ:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); ลองตัวเอง» ตัวอย่าง
เมื่อผ่านค่าพารามิเตอร์ให้ใช้ "anonymous function" ที่เรียกฟังก์ชั่นระบุมีพารามิเตอร์:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); ลองตัวเอง» ตัวอย่าง
เปลี่ยนสีพื้นหลังของ <button> องค์ประกอบ:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); ลองตัวเอง» ตัวอย่าง
โดยใช้พารามิเตอร์ useCapture ตัวเลือกที่จะแสดงให้เห็นถึงความแตกต่างระหว่างเดือดและจับ:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); ลองตัวเอง» ตัวอย่าง
ใช้ removeEventListener() วิธีการที่จะเอาตัวจัดการเหตุการณ์ที่ได้รับที่แนบมากับ addEventListener() วิธีการ:
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); ลองตัวเอง» ตัวอย่าง
เบราว์เซอร์ที่ไม่สนับสนุน addEventListener() วิธีการที่คุณสามารถใช้ attachEvent() วิธีการ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการแก้ปัญหาเบราว์เซอร์:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา JavaScript: HTML DOM EventListener
HTML DOM อ้างอิง: เอกสาร addEventListener()