การอ่านที่เกี่ยวข้อง:
JavaScript เหตุการณ์สรุปการเรียนรู้ (V) ประเภทเหตุการณ์เมาส์ใน JS
//www.vevb.com/article/86259.htm
สรุปเหตุการณ์ JavaScript การเรียนรู้ (i) เหตุการณ์เหตุการณ์
//www.vevb.com/article/86261.htm
สรุปเหตุการณ์การเรียนรู้ JavaScript (IV) สมาชิกสาธารณะของเหตุการณ์ (คุณสมบัติและวิธีการ)
//www.vevb.com/article/86262.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (iii) วัตถุเหตุการณ์ JS
1. ตัวจัดการกิจกรรม
ดังที่ได้กล่าวไว้ก่อนหน้านี้เหตุการณ์คือการกระทำบางอย่างที่ดำเนินการโดยผู้ใช้หรือเบราว์เซอร์เองเช่นคลิกโหลดและ MouseOver เป็นชื่อทั้งหมดของเหตุการณ์ ฟังก์ชั่นที่ตอบสนองต่อเหตุการณ์บางอย่างเรียกว่าตัวจัดการเหตุการณ์ (เรียกอีกอย่างว่าตัวจัดการเหตุการณ์, ตัวจัดการเหตุการณ์) ชื่อของตัวจัดการเหตุการณ์เริ่มต้นด้วย "on" ดังนั้นตัวจัดการเหตุการณ์ของเหตุการณ์การคลิกคือ onclick และตัวจัดการเหตุการณ์ของเหตุการณ์โหลดคือ onload
มีสามวิธีหลักในการระบุตัวจัดการเหตุการณ์สำหรับกิจกรรม
1. HTML Handler Event Event
ก่อนอื่นวิธีการนี้ล้าสมัย เนื่องจากการกระทำ (รหัส JavaScript) และเนื้อหา (รหัส HTML) จะถูกรวมกันอย่างแน่นหนา แต่มันก็ยังสามารถใช้งานได้เมื่อเขียนตัวอย่างเล็ก ๆ
มีสองวิธีในการทำเช่นนี้ทั้งสองอย่างง่ายมาก:
ประเภทแรก: กำหนดตัวจัดการเหตุการณ์โดยตรงและการกระทำที่รวมอยู่ใน HTML
การคัดลอกรหัสมีดังนี้: <อินพุต type = "ปุ่ม" value = "คลิกฉัน!"/>
ประเภทที่สอง: กำหนดตัวจัดการเหตุการณ์ใน HTML และการดำเนินการที่ดำเนินการเรียกว่าสคริปต์ที่กำหนดไว้ที่อื่น
การคัดลอกรหัสมีดังนี้: <อินพุต type = "ปุ่ม" value = "คลิกฉัน!"/> <script> function showmessage () {alert ("คลิก!");} </script>
บันทึก:
1) ผ่านตัวแปรเหตุการณ์คุณสามารถเข้าถึงเหตุการณ์ได้โดยตรง ตัวอย่างเช่น onClick = "Alert (Event.type)" จะปรากฏขึ้นเหตุการณ์คลิก
2) ค่านี้เท่ากับองค์ประกอบเป้าหมายของเหตุการณ์ซึ่งองค์ประกอบเป้าหมายคืออินพุต ตัวอย่างเช่น onclick = "การแจ้งเตือน (this.value)" สามารถรับค่าค่าขององค์ประกอบอินพุต
2. ตัวจัดการเหตุการณ์ระดับ DOM0
วิธีนี้ง่ายและข้ามเบราว์เซอร์ แต่สามารถเพิ่มตัวจัดการเหตุการณ์ในองค์ประกอบเดียวเท่านั้น
เนื่องจากวิธีนี้เพิ่มตัวจัดการเหตุการณ์หลายรายการให้กับองค์ประกอบต่อไปนี้จะแทนที่หนึ่งก่อนหน้านี้
เพิ่มตัวจัดการเหตุการณ์:
<อินพุต type = "ปุ่ม" value = "คลิกฉัน!" onClick = "showMessage ()"/> <script> function showMessage () {alert ("คลิก!");} </script>ลบตัวจัดการเหตุการณ์:
การคัดลอกรหัสมีดังนี้: mybtn.onclick = null;
3. ตัวจัดการเหตุการณ์ระดับ DOM2
ตัวจัดการเหตุการณ์ระดับ DOM2 สามารถเพิ่มตัวจัดการเหตุการณ์หลายตัวลงในองค์ประกอบเดียว มันกำหนดสองวิธีในการเพิ่มและลบตัวจัดการเหตุการณ์: addeventListener () และ removeEventListener ()
ทั้งสองวิธีต้องใช้ 3 พารามิเตอร์: ชื่อเหตุการณ์ฟังก์ชันตัวจัดการเหตุการณ์และค่าบูลีน
ค่าบูลีนนี้เป็นจริงและเหตุการณ์จะถูกประมวลผลในขั้นตอนการจับภาพเท็จและเหตุการณ์จะถูกประมวลผลในขั้นตอนฟองซึ่งค่าเริ่มต้นเป็นเท็จ
เพิ่ม Handler Event: ตอนนี้เพิ่มตัวจัดการเหตุการณ์สองตัวสำหรับปุ่มหนึ่งโผล่ขึ้นมา "สวัสดี" และอีกคนหนึ่งปรากฏขึ้น "โลก"
<อินพุต id = "mybtn" type = "ปุ่ม" value = "คลิกฉัน!"/> <script> var mybtn = document.getElementById ("mybtn"); mybtn.addeventListener ("คลิก", function () {alert ("hello");}, false); mybtn.addeventListener ("คลิก", function () {Alert ("World");}, false); </script>DELETE EVENT HANDLER: ตัวจัดการเหตุการณ์ที่เพิ่มผ่าน AddEventListener จะต้องถูกลบผ่าน removeVentListener และพารามิเตอร์จะสอดคล้องกัน
หมายเหตุ: ฟังก์ชั่นที่ไม่ระบุชื่อที่เพิ่มผ่าน AddEventListener จะไม่ถูกลบ รหัสต่อไปนี้จะไม่ทำงาน!
การคัดลอกรหัสมีดังนี้: mybtn.removeeVentListener ("คลิก" ฟังก์ชัน () {แจ้งเตือน ("โลก");}, เท็จ);
ดูเหมือนว่า RemoveEventListener นั้นสอดคล้องกับพารามิเตอร์ addeventListener ด้านบน แต่ในความเป็นจริงฟังก์ชั่นที่ไม่ระบุชื่อในพารามิเตอร์ที่สองนั้นแตกต่างกันอย่างสิ้นเชิง
ดังนั้นในการลบตัวจัดการเหตุการณ์รหัสสามารถเขียนได้เช่นนี้:
<อินพุต id = "mybtn" type = "ปุ่ม" value = "คลิกฉัน!"/> <script> var mybtn = document.getElementById ("mybtn"); var handler = function () {alert ("hello"); } mybtn.addeventListener ("คลิก", ตัวจัดการ, เท็จ); mybtn.removeeVentListener ("คลิก", Handler, False); </script>2. เช่นตัวจัดการกิจกรรม
1. สถานการณ์การใช้งานจริง
IE8 และด้านล่างเบราว์เซอร์ไม่รองรับ AddEventListener หากคุณต้องการเข้ากันได้กับ IE8 และต่ำกว่าเบราว์เซอร์ในการพัฒนาจริง หากคุณใช้เหตุการณ์ที่มีผลผูกพันดั้งเดิมและจำเป็นต้องประมวลผลเข้ากันได้คุณสามารถใช้ jQuery bind แทน
2. IE8 เหตุการณ์ที่มีผลผูกพัน
IE8 และเบราว์เซอร์ต่อไปนี้ใช้สองวิธีที่คล้ายกันเช่นเดียวกับใน DOM: attainEvent () และ detachevent ()
ทั้งสองวิธีต้องใช้สองพารามิเตอร์: ชื่อตัวจัดการเหตุการณ์และฟังก์ชันตัวจัดการเหตุการณ์
บันทึก:
IE11 รองรับ AddEventListener เท่านั้น!
IE9 และ IE10 รองรับสิ่งที่แนบมาและ addeventListener!
TE8 และด้านล่างรองรับสิ่งที่แนบมาเท่านั้น!
คุณสามารถใช้รหัสต่อไปนี้เพื่อทดสอบในเบราว์เซอร์เวอร์ชัน IE ต่างๆ
<อินพุต id = "mybtn" type = "ปุ่ม" value = "คลิกฉัน!"/> <script> var mybtn = document.getElementById ("mybtn"); var handlerie = function () {alert ("helloie"); } var handlerdom = function () {Alert ("HelloDom"); } mybtn.addeventListener ("คลิก", handlerdom, false); mybtn.attachevent ("onclick", handlerie); </script>เพิ่ม Handler Event: ตอนนี้เพิ่มตัวจัดการกิจกรรมสองตัวสำหรับปุ่มหนึ่งโผล่ขึ้นมา "สวัสดี" และอีกคนหนึ่งปรากฏขึ้น "โลก"
<script> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("onclick", function () {alert ("hello");}); mybtn.attachevent ("onclick", function () {Alert ("World");}); </script>หมายเหตุ: เอฟเฟกต์การดำเนินการที่นี่น่าสังเกต:
"World" ปรากฏขึ้นเป็นครั้งแรกในเบราว์เซอร์ด้านล่าง IE8 จากนั้น "สวัสดี" ลำดับของเหตุการณ์ที่ทริกเกอร์ใน DOM นั้นตรงกันข้าม
IE9 และสูงกว่าเบราว์เซอร์แรกจะปรากฏขึ้น "สวัสดี" แล้วปรากฏขึ้น "โลก" ลำดับเดียวกับเหตุการณ์ที่เกิดขึ้นใน DOM
จะเห็นได้ว่าเบราว์เซอร์คือค่อยๆเข้าสู่เส้นทางที่ถูกต้อง - -
DELETE EVENT HANDLER: ตัวจัดการเหตุการณ์ที่เพิ่มผ่านสิ่งที่แนบมาจะต้องถูกลบผ่านวิธี Detachevent และพารามิเตอร์มีความสอดคล้องกัน
เช่นเดียวกับเหตุการณ์ DOM ฟังก์ชั่นที่ไม่ระบุชื่อจะไม่ถูกลบ
ดังนั้นในการลบตัวจัดการเหตุการณ์รหัสสามารถเขียนได้เช่นนี้:
<อินพุต id = "mybtn" type = "ปุ่ม" value = "คลิกฉัน!"/> <script> var mybtn = document.getElementById ("mybtn"); var handler = function () {alert ("hello"); } mybtn.attachevent ("onclick", handler); mybtn.detachevent ("onclick", handler); </script>หมายเหตุ : มีอีกสถานที่หนึ่งที่ให้ความสนใจในตัวจัดการเหตุการณ์ IE: ขอบเขต
การใช้วิธีการแนบ () ตัวจัดการเหตุการณ์จะทำงานในขอบเขตทั่วโลกดังนั้นจึงเท่ากับหน้าต่าง
ขอบเขตของวิธีการที่ระดับ DOM2 หรือ DOM0 อยู่ในองค์ประกอบและค่านี้เป็นองค์ประกอบเป้าหมาย
ตัวอย่างต่อไปนี้จะปรากฏขึ้นจริง
<อินพุต id = "mybtn" type = "ปุ่ม" value = "คลิกฉัน!"/> <script> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("onclick", function () {Alert (this === window);}); </script>นี่คือสิ่งที่ควรทราบเมื่อเขียนรหัสข้ามเบราว์เซอร์
IE7/8 Detection:
// ผู้ตัดสิน IE7/8 การตรวจจับความเข้ากันได้ var isie = !! window.activexobject; var isie6 = isie &&! window.xmlhttprequest; var isie8 = isie && !! document.documentmode; var isie7 = isie &&! isie6 &&! isie8; if (isie8 || isie7) {li.attachevent ("onclick", function () {_marker.openinfowindow (_iw);})} else {li.addeventListener ("คลิก"ข้างต้นเป็นความรู้ที่เกี่ยวข้องของ JavaScript Event Learning Summary (II) ของตัวจัดการเหตุการณ์ JS ที่บรรณาธิการแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!