addEventListener() วิธีการ
ตัวอย่าง
เพิ่มฟังเหตุการณ์ที่เริ่มทำงานเมื่อผู้ใช้คลิกปุ่ม:
document.getElementById("myBtn").addEventListener("click", displayDate); ลองตัวเอง» addEventListener() วิธีการแนบตัวจัดการเหตุการณ์ไปยังองค์ประกอบที่ระบุ
addEventListener() วิธีการแนบตัวจัดการเหตุการณ์ไปยังองค์ประกอบโดยไม่ต้องมีการเขียนทับจัดการเหตุการณ์ที่มีอยู่
คุณสามารถเพิ่มตัวจัดการเหตุการณ์มากมายที่จะองค์ประกอบหนึ่ง
คุณสามารถเพิ่มตัวจัดการเหตุการณ์หลายชนิดเดียวกันที่จะองค์ประกอบหนึ่งคือสอง "click" เหตุการณ์ที่เกิดขึ้น
คุณสามารถเพิ่มฟังเหตุการณ์ที่ DOM วัตถุใด ๆ ที่ไม่ได้เป็นเพียงองค์ประกอบ HTML คือวัตถุหน้าต่าง
addEventListener() วิธีการทำให้ง่ายต่อการควบคุมวิธีการจัดกิจกรรมที่ทำปฏิกิริยากับเดือด
เมื่อใช้ addEventListener() method, JavaScript ถูกแยกออกจากมาร์กอัป HTML, สำหรับการอ่านที่ดีขึ้นและช่วยให้คุณสามารถเพิ่มฟังเหตุการณ์แม้ในขณะที่คุณไม่สามารถควบคุมมาร์กอัปของ HTML
คุณสามารถลบฟังเหตุการณ์โดยใช้ removeEventListener() วิธีการ
วากยสัมพันธ์
element .addEventListener( event, function, useCapture );พารามิเตอร์แรกคือประเภทของเหตุการณ์ที่เกิดขึ้น (เช่น "click" หรือ "mousedown" )
พารามิเตอร์ที่สองคือฟังก์ชั่นที่เราต้องการที่จะเรียกเมื่อมีเหตุการณ์เกิดขึ้น
พารามิเตอร์ที่สามเป็นค่าบูลีนระบุว่าจะใช้เหตุการณ์เดือดหรือเหตุการณ์จับ พารามิเตอร์นี้หรือไม่
โปรดทราบว่าคุณไม่ได้ใช้ "on" คำนำหน้าสำหรับเหตุการณ์; ใช้ "click" แทน "onclick"
เพิ่มตัวจัดการเหตุการณ์ที่จะองค์ประกอบ
ตัวอย่าง
การแจ้งเตือน "Hello World!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:
element .addEventListener("click", function(){ alert("Hello World!"); }); ลองตัวเอง» นอกจากนี้คุณยังสามารถดูภายนอก "ชื่อ" ฟังก์ชั่น:
ตัวอย่าง
การแจ้งเตือน "Hello World!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} ลองตัวเอง» เพิ่มตัวจัดการเหตุการณ์หลาย Element เดิม
addEventListener() วิธีการช่วยให้คุณสามารถเพิ่มกิจกรรมหลายองค์ประกอบเดียวกันโดยไม่เขียนทับเหตุการณ์ที่มีอยู่:
ตัวอย่าง
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
ลองตัวเอง» คุณสามารถเพิ่มกิจกรรมที่แตกต่างกันกับองค์ประกอบเดียวกัน:
ตัวอย่าง
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); ลองตัวเอง» เพิ่มตัวจัดการเหตุการณ์ไปยังวัตถุที่หน้าต่าง
addEventListener() วิธีการช่วยให้คุณเพิ่มฟังเหตุการณ์บนวัตถุ DOM HTML ใด ๆ เช่นองค์ประกอบ HTML, เอกสาร HTML วัตถุหน้าต่างหรือวัตถุอื่น ๆ ที่สนับสนุนการจัดกิจกรรมเช่น xmlHttpRequest วัตถุ
ตัวอย่าง
เพิ่มฟังเหตุการณ์ที่ไฟเมื่อผู้ใช้ปรับขนาดหน้าต่าง:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
ลองตัวเอง» ผ่านพารามิเตอร์
เมื่อผ่านค่าพารามิเตอร์ให้ใช้ "ฟังก์ชั่นที่ไม่ระบุชื่อ" ที่เรียกฟังก์ชั่นระบุมีพารามิเตอร์:
เหตุการณ์เดือดหรือเหตุการณ์จับ?
มีสองวิธีการขยายพันธุ์เหตุการณ์ใน DOM HTML, ฟองและจับเป็น
การขยายพันธุ์ที่จัดกิจกรรมเป็นวิธีของการกำหนดองค์ประกอบการสั่งซื้อเมื่อมีเหตุการณ์เกิดขึ้น หากคุณมี <p> องค์ประกอบภายใน <div> องค์ประกอบและผู้ใช้คลิกที่ <p> องค์ประกอบซึ่งองค์ประกอบของ "click" เหตุการณ์ที่ควรจะจัดการก่อน?
ในเหตุการณ์เดือดองค์ประกอบส่วนใหญ่ภายในได้รับการดูแลก่อนแล้วด้านนอกที่: <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() วิธีการ:
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการเหล่านี้
| วิธี | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
หมายเหตุ: addEventListener() และ removeEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน IE 8 และรุ่นก่อนหน้าและ Opera 6.0 และรุ่นก่อนหน้า แต่สำหรับรุ่นนี้เบราว์เซอร์ที่เฉพาะเจาะจงคุณสามารถใช้ attachEvent() วิธีการในการแนบจัดการเหตุการณ์กับองค์ประกอบและ detachEvent() วิธีการที่จะลบออก:
element. attachEvent (event, function);
element. detachEvent (event,
function); ตัวอย่าง
วิธีการแก้ปัญหาเบราว์เซอร์:
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);
}
ลองตัวเอง» อ้างอิงวัตถุ HTML DOM เหตุการณ์
สำหรับรายชื่อของกิจกรรมทั้งหมดของ HTML DOM ให้ดูที่ของเราสมบูรณ์ HTML DOM เหตุการณ์อ้างอิงวัตถุ