HTML DOM addEventListener () วิธีการ

ตัวอย่าง

เพิ่มกิจกรรมการคลิกในเอกสาร เมื่อผู้ใช้คลิกที่ใดก็ได้ในเอกสารประจำตัวประชาชนของ = "สาธิต" ของ <p> เอาท์พุทองค์ประกอบ "Hello World":

document.addEventListener ( "คลิก" ฟังก์ชั่น () {
. document.getElementById ( "สาธิต") innerHTML = "Hello World";
});

ลอง»

ความหมายและการใช้งาน

document.addEventListener () วิธีการที่ใช้ในการเพิ่มตัวจัดการเหตุการณ์เอกสาร

เคล็ดลับ: คุณสามารถใช้ document.removeEventListener () วิธีการที่จะเอา addEventListener () วิธีการที่จะเพิ่มการจัดการเหตุการณ์

เคล็ดลับ: ใช้ องค์ประกอบ addEventListener (). วิธีการที่กำหนดองค์ประกอบการจัดการเหตุการณ์

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์ครั้งแรกเพื่อรองรับจำนวนวิธีรุ่น

ทาง
addEventListener ()	1.0	9.0	1.0	1.0	7.0

หมายเหตุ: Internet Explorer 8 และรุ่นก่อนหน้า IE ไม่สนับสนุน addEventListener () วิธีการ, Opera 7.0 และรุ่นก่อนหน้านี้ไม่สนับสนุนโอเปร่า แต่ประเภทของเบราว์เซอร์รุ่นนี้สามารถใช้ attachEvent () วิธีการเพิ่มตัวจัดการเหตุการณ์ (ปัญหาความเข้ากันข้ามเบราว์เซอร์สามารถดู "ตัวอย่าง")

ไวยากรณ์

document.addEventListener (event, ฟังก์ชั่น useCapture)

ค่าพารามิเตอร์

พารามิเตอร์	ลักษณะ
เหตุการณ์	จำเป็นต้องใช้ ชื่อ String คำอธิบายเหตุการณ์ที่เกิดขึ้น หมายเหตุ: อย่าใช้ "กับ" คำนำหน้า ตัวอย่างเช่นใช้ "คลิก" แทน "onclick" เคล็ดลับ: ทุกเหตุการณ์ HTML DOM คุณสามารถดูของเราสมบูรณ์ HTML DOM เหตุการณ์อ้างอิงวัตถุ
ฟังก์ชัน	จำเป็นต้องใช้ มันอธิบายฟังก์ชั่นหลังจากเหตุการณ์เรียก เมื่อมีเหตุการณ์จะถูกเรียกวัตถุเหตุการณ์เป็นอาร์กิวเมนต์แรกส่งผ่านไปยังฟังก์ชั่น วัตถุชนิดเหตุการณ์ขึ้นอยู่กับเหตุการณ์โดยเฉพาะอย่างยิ่ง ยกตัวอย่างเช่น "คลิก" เหตุการณ์เป็น MouseEvent (เมาส์ event) วัตถุ
useCapture	ไม่จำเป็น ค่าบูลีนที่ระบุว่าการดำเนินการจัดกิจกรรมในการจับกุมหรือฟองเฟส ค่าที่เป็นไปได้: จริง - จัดการเหตุการณ์ดำเนินการในระหว่างขั้นตอนการจับภาพ เริ่มต้น false- จัดการเหตุการณ์ดำเนินการในขั้นตอนการเดือด

รายละเอียดทางเทคนิค

รุ่น DOM:	ระดับ DOM 2 เหตุการณ์
ผลตอบแทน:	ไม่มีค่าตอบแทน
ประวัติ:	ใน Firefox 6 และ Opera 11.60 ใน useCapture พารามิเตอร์เป็นตัวเลือก (ใน Chrome, IE และ Safari ได้เสมอตัวเลือก)

ตัวอย่างเพิ่มเติม

ตัวอย่าง

คุณสามารถจะเรียกด้วยชื่อฟังก์ชั่นการทำงานภายนอก

document.addEventListener ( "คลิก" myFunction);

ฟังก์ชั่น myFunction () {
. document.getElementById ( "สาธิต") innerHTML = "Hello World";
}

ลอง»

ตัวอย่าง

คุณสามารถเพิ่มกิจกรรมเป็นจำนวนมากในเอกสารเพิ่มเหตุการณ์จะไม่เขียนทับเหตุการณ์ที่มีอยู่

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการที่จะเพิ่มกิจกรรมการคลิกในสองเอกสาร:

document.addEventListener ( "คลิก" myFunction);
document.addEventListener ( "คลิก" someOtherFunction);

ลอง»

ตัวอย่าง

คุณสามารถเพิ่มประเภทที่แตกต่างกันของเหตุการณ์ในเอกสาร

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเพิ่มหลายเหตุการณ์ในเอกสาร:

document.addEventListener ( "mouseover" myFunction);
document.addEventListener ( "คลิก" someOtherFunction);
document.addEventListener ( "mouseout" someOtherFunction);

ลอง»

ตัวอย่าง

เมื่อผ่านค่าพารามิเตอร์ที่ใช้เรียกฟังก์ชันที่มีพารามิเตอร์ "ฟังก์ชั่นที่ไม่ระบุชื่อ":

document.addEventListener ( "คลิก" ฟังก์ชั่น () {
myFunction (P1, P2);
});

ลอง»

ตัวอย่าง

ปรับเปลี่ยน <body> องค์ประกอบของพื้นหลัง:

document.addEventListener ( "คลิก" ฟังก์ชั่น () {
document.body.style.backgroundColor = "สีแดง";
});

ลอง»

ตัวอย่าง

โดยใช้ removeEventListener () วิธีการลบผ่าน addEventListener () วิธีการเพิ่มตัวจัดการเหตุการณ์:

// เพิ่มตัวจัดการเหตุการณ์เอกสาร
document.addEventListener ( "MouseMove" myFunction);

// นำจัดการเหตุการณ์เอกสาร
document.removeEventListener ( "MouseMove" myFunction);

ลอง»

ตัวอย่าง

หากเบราว์เซอร์ของคุณไม่สนับสนุน addEventListener () วิธีการที่คุณสามารถใช้ attachEvent () วิธีการแทน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการแก้ปัญหาเบราว์เซอร์:

ถ้า (document.addEventListener) {// เบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น IE 8 และรุ่นก่อนหน้าของ IE
document.addEventListener ( "คลิก" myFunction);
} else if (document.attachEvent) {// IE 8 และรุ่นก่อนหน้าของ IE
document.attachEvent ( "onclick" myFunction);
}

ลอง»