ตัวอย่างการใช้งานตัวอย่างของ addEventListener

(ควรสังเกตว่าต้องวาง DIV ไว้หน้า JS)

โดยทั่วไปหากวัตถุ DOM ถูกผูกไว้กับเหตุการณ์เดียวกันมีเพียงวัตถุสุดท้ายเท่านั้นที่จะมีผลเช่น:

การคัดลอกรหัสมีดังนี้:

document.getElementById ("btn"). onclick = method1;

document.getElementById ("btn"). onclick = method2;

document.getElementById ("btn"). onclick = method3;

จากนั้นเมธอด 3 เท่านั้นที่จะมีผล

หากเป็นซีรี่ส์ Mozilla ให้ใช้ addeventListener เพื่อเปิดใช้งานหลายเหตุการณ์ที่จะนำไปใช้ตามลำดับเช่น:

การคัดลอกรหัสมีดังนี้:

var btn1obj = document.getElementById ("BTN1");

//element.addeventListener(Type, Listener, Usecapture);

btn1obj.addeventListener ("คลิก", ​​วิธีการ 1, เท็จ);

btn1obj.addeventListener ("คลิก", ​​method2, false);

btn1obj.addeventListener ("คลิก", ​​method3, false);

ลำดับการดำเนินการคือ Method1-> Method2-> Method3

หากเป็นซีรี่ส์ IE สิ่งที่แนบมาสามารถเปิดใช้งานหลายเหตุการณ์ที่จะนำไปใช้ตามลำดับเช่น:

การคัดลอกรหัสมีดังนี้:

var btn1obj = document.getElementById ("BTN1");

//object.attachevent( event, function);

btn1obj.attachevent ("onclick", method1);

btn1obj.attachevent ("onclick", method2);

btn1obj.attachevent ("onclick", method3);

ลำดับการดำเนินการคือ Method3-> method2-> วิธีการ 1

-

ใน Mozilla:

วิธีใช้ addEventListener

target.addeventListener (พิมพ์, ผู้ฟัง, usecapture);

เป้าหมาย: โหนดเอกสาร, เอกสาร, หน้าต่างหรือ xmlhttprequest

ประเภท: สตริงชื่อเหตุการณ์ไม่มี "on" เช่น "คลิก", ​​"mouseover", "keydown" ฯลฯ

ผู้ฟัง: ใช้อินเทอร์เฟซ EventListener หรือฟังก์ชั่นใน JavaScript

usecapture: ไม่ว่าจะใช้การจับภาพโดยทั่วไปใช้เท็จ ตัวอย่างเช่น: document.getElementById ("testText"). addEventListener ("keydown", ฟังก์ชั่น (เหตุการณ์) {alert (event.keycode);}, false);

ใน IE:

target.attachevent (พิมพ์, ผู้ฟัง);

เป้าหมาย: โหนดเอกสาร, เอกสาร, หน้าต่างหรือ xmlhttprequest

ประเภท: สตริงชื่อเหตุการณ์ที่มี "on" เช่น "onclick", "onmouseover", "onkeydown" ฯลฯ

ผู้ฟัง: ใช้อินเทอร์เฟซ EventListener หรือฟังก์ชั่นใน JavaScript ตัวอย่างเช่น: document.getElementById ("txt"). attaineVent ("onclick", ฟังก์ชั่น (เหตุการณ์) {alert (event.keycode);});

W3C และ IE ยังสนับสนุนการลบเหตุการณ์ที่ระบุ จุดประสงค์คือการลบเหตุการณ์ที่ตั้งไว้ รูปแบบมีดังนี้:

removeEventListener (เหตุการณ์, ฟังก์ชั่น, การจับ/ฟอง);

รูปแบบของ Windows IE มีดังนี้:

detachevent (เหตุการณ์, ฟังก์ชั่น);

วิวัฒนาการ DOM2:

การใช้งาน DOM2 ใหม่สามารถสังเกตได้โดยฟังก์ชั่น addingEventListener ():

การคัดลอกรหัสมีดังนี้:

addeventListener (เหตุการณ์, ฟังก์ชั่น, การจับ/ฟอง);

เหตุการณ์พารามิเตอร์จะแสดงในตารางด้านบน ฟังก์ชั่นคือฟังก์ชั่นที่จะดำเนินการ การจับและฟองเป็นสองโหมดเวลาที่กำหนดโดย W3C พูดง่ายๆคือการจับภาพคือการอ่านบรรทัดสุดท้ายจากจุดเริ่มต้นของเอกสารแล้วดำเนินการเหตุการณ์ Bubble ก่อนพบตำแหน่งที่ระบุแล้วดำเนินการเหตุการณ์

พารามิเตอร์ของการจับ/ฟองคือค่าบูลีนหมายถึงการใช้การจับภาพและวิธีการเท็จในการฟอง Windows Internet Explorer ยังได้กำหนด EventHandler ซึ่งเป็นไปได้

การคัดลอกรหัสมีดังนี้:

window.attachevent ("ส่ง", myfunction ());

สิ่งที่พิเศษกว่าคือสิ่งที่แนบมาไม่จำเป็นต้องระบุพารามิเตอร์การจับ/ฟองเพราะในสภาพแวดล้อมของ Windows IE จะใช้โหมดฟอง

จะกำหนดประเภทการฟังที่รองรับได้อย่างไร? ชอบ:

การคัดลอกรหัสมีดังนี้:

if (typeof window.addeventListener! =“ ไม่ได้กำหนด”) {

window.addeventListener ("โหลด", โรลโอเวอร์, เท็จ);

} อื่น {

window.attachevent ("onload", โรลโอเวอร์)

-

typeof window.addeventlistener! = รหัสโปรแกรม "ไม่ได้กำหนด" สามารถกำหนดได้ว่าเบราว์เซอร์ของผู้ใช้รองรับโมเดลเหตุการณ์ addeventListener หรือไม่ หากไม่ได้รับการสนับสนุนจะใช้ attaidEvent

W3C และ IE ยังสนับสนุนการลบเหตุการณ์ที่ระบุ จุดประสงค์คือการลบเหตุการณ์ที่ตั้งไว้ รูปแบบมีดังนี้:

รูปแบบ W3C:

removeEventListener (เหตุการณ์, ฟังก์ชั่น, การจับ/ฟอง);

รูปแบบของ Windows IE มีดังนี้:

detachevent (เหตุการณ์, ฟังก์ชั่น);