สรุปวิธีการต่างๆ ของการโหลดเหตุการณ์แบบไดนามิกใน js

บางครั้งจำเป็นต้องโหลดวิธีการบางอย่างของเหตุการณ์จาวาสคริปต์แบบไดนามิก

บ่อยครั้งที่เราจำเป็นต้องเพิ่มเหตุการณ์แบบไดนามิกใน JS ซึ่งเกี่ยวข้องกับปัญหาความเข้ากันได้ของเบราว์เซอร์ เรามักจะใช้หลายวิธีผสมกันที่กล่าวถึงด้านล่าง

วิธีที่ 1 setAttribute

var obj = document.getElementById("obj");

obj.setAttribute("onclick", "javascript:alert('test');");

ที่นี่ setAttribute ใช้เพื่อระบุแอตทริบิวต์ onclick ซึ่งง่ายและเข้าใจง่าย

อย่างไรก็ตาม: IE ไม่รองรับ ไม่ใช่ว่า IE ไม่รองรับฟังก์ชัน setAttribute แต่ไม่รองรับการใช้ setAttribute เพื่อตั้งค่าแอตทริบิวต์บางอย่าง รวมถึงแอตทริบิวต์ของวัตถุ คุณลักษณะของคอลเลกชัน และคุณลักษณะของเหตุการณ์ หรืออีกนัยหนึ่ง ให้ใช้ setAttribute to ตั้งค่าสไตล์ onclick และ onmouseover มันใช้ไม่ได้กับ IE

วิธีที่ 2 ใช้แนบEventและaddEventListener

IE รองรับไฟล์แนบEvent

obj.attachEvent("onclick", ฟู);

ฟังก์ชั่นฟู()

-

alert("ทดสอบ");

-

เขียนรวมกันก็ได้

obj.attachEvent("onclick", function(){alert("test");});

เบราว์เซอร์อื่นรองรับ addEventListener

obj.addEventListener("คลิก", ​​ฟู, เท็จ);

ฟังก์ชั่นฟู()

-

alert("ทดสอบ");

-

ยังสามารถเขียนร่วมกันได้

obj.addEventListener("คลิก", ​​function(){alert("Test");}, false);

โปรดทราบว่าเหตุการณ์แนบEvent เปิดอยู่ เช่น onclick แต่ addEventListener ไม่มีเปิด เช่น คลิก

อย่างไรก็ตามพารามิเตอร์ตัวที่สามของ addEventListener (แม้ว่าจะไม่ค่อยได้ใช้) useCapture - หากเป็นจริง useCapture จะระบุว่าผู้ใช้ต้องการเริ่มการจับภาพ เมื่อเริ่มต้นการจับ เหตุการณ์ทั้งหมดของประเภทที่ระบุจะถูกส่งไปยัง EventListener ที่ลงทะเบียน ก่อนที่จะถูกส่งไปยัง EventTargets ใด ๆ ที่อยู่ด้านล่างในแผนผัง เหตุการณ์ที่กำลังเดือดพล่านบนต้นไม้จะไม่เริ่มการทำงานของ EventListener ที่ระบุโดยใช้การจับภาพ

แอปพลิเคชั่นที่ครอบคลุม

คัดลอกรหัสรหัสดังต่อไปนี้:

ถ้า (window.attachEvent)

-

//รหัสเหตุการณ์ IE

-

อื่น

-

//รหัสเหตุการณ์สำหรับเบราว์เซอร์อื่น

-

วิธีที่สาม เหตุการณ์ = ฟังก์ชัน

ตัวอย่าง: obj.onclick = Foo;

สิ่งนี้ได้รับการรองรับในเบราว์เซอร์หลายตัว มันเป็นของสเปคเก่า (วิธีที่ 2 เป็นของสเปค DOM2) แต่เนื่องจากใช้งานง่ายจึงถูกนำมาใช้ในหลาย ๆ สถานการณ์

นี่คือวิธีแก้ปัญหาของฉัน:

คัดลอกรหัสรหัสดังต่อไปนี้:

ฟังก์ชั่นแสดง(){

alert("สวัสดีชาวโลก!!!");

-

obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');

วิธีการแนบEvent แนบเหตุการณ์การประมวลผลอื่น ๆ กับเหตุการณ์ (ไม่รองรับซีรีย์ Mozilla)

เมธอด addEventListener ใช้ในซีรีส์ Mozilla

ตัวอย่าง:

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

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

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

หากเขียนแบบนี้ จะมีเพียง medhot3 เท่านั้นที่จะถูกดำเนินการ

เขียนแบบนี้:

var btn1Obj = document.getElementById("btn1");

//object.attachEvent(เหตุการณ์,ฟังก์ชัน);

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);

ลำดับการดำเนินการคือ method3->method2->method1

หากเป็นซีรีส์ Mozilla ระบบจะไม่รองรับวิธีนี้ และคุณต้องใช้ addEventListener

var btn1Obj = document.getElementById("btn1");

//element.addEventListener(ประเภท,ผู้ฟัง,useCapture);

btn1Obj.addEventListener("คลิก",method1,false);

btn1Obj.addEventListener("คลิก",method2,false);

btn1Obj.addEventListener("คลิก",method3,false);

ลำดับการดำเนินการคือ method1->method2->method3

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

1.

คัดลอกรหัสรหัสดังต่อไปนี้:

var el = EDITFORM_DOCUMENT.body;

//รับวัตถุก่อน EDITFORM_DOCUMENT จริงๆ แล้วเป็น iframe

ถ้า (el.addEventListener){

el.addEventListener('คลิก', KindDisableMenu, false);

} อื่นถ้า (el.attachEvent){

el.attachEvent('onclick', KindDisableMenu);

-

2.

คัดลอกรหัสรหัสดังต่อไปนี้:

ถ้า (window.addEventListener) {

window.addEventListener('โหลด', _uCO, false);

} อื่นถ้า (window.attachEvent) {

window.attachEvent('onload', _uCO);

-