ก่อนอื่นแนะนำวิธีการทั่วไปของการเพิ่มเหตุการณ์โดย JS เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <p id = "p1"> ทดสอบเพิ่มเหตุการณ์: firefox ใช้ addeventListener, IE ใช้ attedEvent <br> } function test2 () {alert ("test2"); } // เพิ่มฟังก์ชั่นวิธีการทั่วไปของเหตุการณ์ addevent (องค์ประกอบ, e, fn) {// firefox ใช้ addeventListener เพื่อเพิ่มเหตุการณ์ถ้า (element.addeventListener) {element.addeventListener (e, fn, false); } // ie ใช้ attaintEvent เพื่อเพิ่มเหตุการณ์อื่น {element.attacheVent ("on"+e, fn); }} window.onload = function () {var element = document.getElementById ("p1"); addevent (องค์ประกอบ, "คลิก", test1); addevent (องค์ประกอบ, "คลิก", test2); } </script> </body> </html>วิธีทั่วไปในการผูกเหตุการณ์ JS:
วิธีการผูกเหตุการณ์: ผูกฟังก์ชั่นเหตุการณ์ด้วยแอตทริบิวต์เหตุการณ์
ข้อได้เปรียบ:
1. กรอกการแยกพฤติกรรม
2. สะดวกสำหรับการใช้งานวัตถุที่เกี่ยวข้องเนื่องจากฟังก์ชั่นปรากฏเป็นแอตทริบิวต์ ON *** คุณสามารถอ้างถึงวัตถุที่เกี่ยวข้องโดยตรงโดยใช้สิ่งนี้
3. ง่ายต่อการอ่านวัตถุเหตุการณ์ เมื่อเหตุการณ์ถูกทริกเกอร์ระบบจะส่งผ่านวัตถุเหตุการณ์ไปยังฟังก์ชั่นเหตุการณ์โดยอัตโนมัติและหนึ่งในนั้นจะถูกส่งผ่าน
<? XML เวอร์ชัน = "1.0" การเข้ารหัส = "UTF-8"?> <! Doctype html สาธารณะ "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/dtd/dtml1-dtml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ype" content = "text/html; charset = utf-8"/> <title> k = document.getElementById ('k'). onclick = ฟังก์ชั่น (เหตุการณ์) {var jj = document.getElementById ('jj'); jj.style.top = event.clientx+'px'; jj.style.left = event.clienty+'px'; }} </script> <style> #K {WIDTH: 60PX; ความสูง: 80PX; พื้นหลังสี:#80ffff;} #jj {width: 60px; ความสูง: 80px; พื้นหลัง-สี:#ffff00; z-index: 1000; ตำแหน่ง: Absolute;} </style> </head> <body> <div id = "k">ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน