เมื่อเร็ว ๆ นี้เนื่องจากฉันต้องแก้ไขเว็บไซต์ทุกวันเพื่อสร้างเอฟเฟกต์พิเศษสำหรับเว็บไซต์ฉันได้ดูเหตุการณ์การติดต่อ JS จำนวนมาก ฉันรู้วิธีใช้ส่วนเล็ก ๆ ของมันเท่านั้น บางครั้งมันก็ค่อนข้างวุ่นวายเมื่อฉันใช้มัน ตอนนี้ฉันได้แยกออกแล้ว ฉันจะแบ่งปันกับแพลตฟอร์มเครือข่าย Wulin สำหรับการอ้างอิงของคุณ!
1. เหตุการณ์ JavaScript คืออะไร?
เหตุการณ์เป็นหัวใจสำคัญของแอปพลิเคชัน JavaScript และกาวที่ติดกาวทุกอย่างเข้าด้วยกัน เมื่อเรามีการโต้ตอบบางประเภทกับหน้าเว็บในเบราว์เซอร์เหตุการณ์จะเกิดขึ้น
เหตุการณ์อาจคลิกที่เนื้อหาบางอย่างผ่านองค์ประกอบเฉพาะหรือกดปุ่มบางอย่างบนแป้นพิมพ์และเหตุการณ์อาจเป็นสิ่งที่เกิดขึ้นในเว็บเบราว์เซอร์เช่นการโหลดหน้าเว็บบางอย่างหรือผู้ใช้เลื่อนหน้าต่างหรือเปลี่ยนขนาดหน้าต่าง เพื่อให้มันตรงไปตรงมาเหตุการณ์เป็นช่วงเวลาการโต้ตอบที่เฉพาะเจาะจงที่เกิดขึ้นในเอกสารหรือเบราว์เซอร์!
ด้วยการใช้ JavaScript คุณสามารถฟังเหตุการณ์เฉพาะและระบุว่าเหตุการณ์บางอย่างเกิดขึ้นในการตอบสนองต่อพวกเขา
2. การไหลของเหตุการณ์
เหตุการณ์เหตุการณ์อธิบายลำดับของเหตุการณ์ที่ยอมรับในหน้า ในระยะแรกของการพัฒนาเบราว์เซอร์ผู้ผลิตเบราว์เซอร์รายใหญ่สองรายคือและ Netscape ต่อสู้ซึ่งกันและกันและสถานการณ์การโกงเกิดขึ้นนั่นคือการตีความการไหลของเหตุการณ์แสดงให้เห็นถึงคำจำกัดความที่ตรงกันข้ามสองประการ นั่นคือสิ่งที่เราคุ้นเคย: เช่น Bubbles Event, การจับเหตุการณ์ NetScape มาดูภาพก่อนและดูโครงสร้างสั้น ๆ :
1. ฟองสบู่
ฟองสบู่หมายถึงเหตุการณ์ที่ได้รับจากองค์ประกอบที่เฉพาะเจาะจงมากที่สุด (โหนดที่มีระดับการทำรังที่ลึกที่สุดในเอกสาร) จากนั้นแพร่กระจายขึ้นทีละขั้นตอนไปยังโหนดที่เฉพาะเจาะจงน้อยที่สุด (เอกสาร) ใช้แผนภาพด้านบนเพื่อแสดงให้เห็นว่าเมื่อคลิกที่ส่วนข้อความจะได้รับองค์ประกอบแรกที่ข้อความจากนั้นแพร่กระจายไปยังหน้าต่างทีละขั้นตอนนั่นคือกระบวนการของ 6-7-8-9-10 จะถูกดำเนินการ
2. การจับเหตุการณ์
การจับเหตุการณ์หมายความว่าเหตุการณ์ได้รับจากโหนดที่เฉพาะเจาะจงน้อยกว่าและโหนดที่เฉพาะเจาะจงที่สุดจะได้รับเหตุการณ์ในที่สุด ในทำนองเดียวกันในโมเดลด้านบนเมื่อคลิกที่ส่วนข้อความจะได้รับจากหน้าต่างก่อนแล้วแพร่กระจายไปยังองค์ประกอบข้อความทีละขั้นตอนนั่นคือกระบวนการของ 1-2-3-4-5 จะถูกดำเนินการ
มันทำงานในรหัสได้อย่างไร? ให้ในภายหลัง!
3. สามวิธีในการจัดการเหตุการณ์ JavaScript
เมื่อเหตุการณ์เกิดขึ้นเราต้องจัดการกับมัน มีสามวิธีหลักในการจัดการตัวจัดการเหตุการณ์ JavaScript:
1. HTML Handler Event Event
นั่นคือเราเพิ่มตัวจัดการเหตุการณ์โดยตรงไปยังรหัส HTML เช่นรหัสต่อไปนี้:
<อินพุต id = "btn" value = "ปุ่ม" type = "ปุ่ม" onclick = "showmsg ();"> <script> ฟังก์ชั่น showmsg () {alert ("html เพิ่มการประมวลผลเหตุการณ์"); } </script>จากรหัสข้างต้นเราจะเห็นว่าการประมวลผลเหตุการณ์นั้นซ้อนกันโดยตรงในองค์ประกอบ มีปัญหากับสิ่งนี้: การมีเพศสัมพันธ์ระหว่างรหัส HTML และ JS นั้นแข็งแกร่งเกินไป หากคุณต้องการเปลี่ยน showmsg ใน JS วันหนึ่งคุณไม่เพียง แต่ต้องแก้ไขใน JS แต่ยังต้องแก้ไขใน HTML เราสามารถยอมรับการแก้ไขหนึ่งหรือสองครั้ง แต่เมื่อรหัสของคุณถึงระดับ 10,000 บรรทัดมันจะทำให้ผู้คนและเงินต้องแก้ไข ดังนั้นเราไม่แนะนำวิธีนี้
2. ตัวจัดการเหตุการณ์ระดับ DOM0
นั่นคือเพิ่มการประมวลผลเหตุการณ์ในวัตถุที่ระบุดูรหัสต่อไปนี้:
<อินพุต id = "btn" value = "ปุ่ม" type = "ปุ่ม"> <script> var btn = document.getElementById ("btn"); btn.onclick = function () {Alert ("การประมวลผลเหตุการณ์การเพิ่มระดับ DOM"); } btn.onclick = null; // หากคุณต้องการลบเหตุการณ์การคลิกของ btn ให้ตั้งค่าเป็น null </script>จากรหัสข้างต้นเราจะเห็นว่าการมีเพศสัมพันธ์ระหว่างเหตุการณ์ระดับ DOM0 รหัส HTML และรหัส JS ลดลงอย่างมากเมื่อเทียบกับตัวจัดการเหตุการณ์ HTML อย่างไรก็ตามโปรแกรมเมอร์อัจฉริยะยังไม่พอใจและหวังว่าจะหาวิธีที่ง่ายกว่าในการจัดการกับมัน มาดูวิธีที่สามกันเถอะ
3. ตัวจัดการเหตุการณ์ระดับ DOM2
DOM2 ยังเพิ่มตัวจัดการเหตุการณ์ไปยังวัตถุเฉพาะ แต่ส่วนใหญ่เกี่ยวข้องกับสองวิธีซึ่งใช้ในการจัดการการดำเนินการของการระบุและลบตัวจัดการเหตุการณ์: addEventListener () และ removeEventListener () พวกเขาทั้งหมดได้รับสามพารามิเตอร์: ชื่อเหตุการณ์ที่จะประมวลผลฟังก์ชั่นเป็นตัวจัดการเหตุการณ์และค่าบูลีน (ไม่ว่าเหตุการณ์จะถูกประมวลผลในขั้นตอนการจับภาพ) ดูรหัสต่อไปนี้:
<อินพุต id = "btn" value = "ปุ่ม" type = "ปุ่ม"> <script> var btn = document.getElementById ("btn"); btn.addeventListener ("คลิก", showmsg, false); // ที่นี่เราตั้งค่าสุดท้ายเป็นเท็จนั่นคือมันไม่ได้ดำเนินการในขั้นตอนการจับ โดยทั่วไปการประมวลผลฟองนั้นเข้ากันได้มากขึ้นในแต่ละฟังก์ชั่นเบราว์เซอร์ showmsg () {Alert ("Dom-Level Add Event Handler"); } btn.removeeVentListener ("คลิก", showmsg, false); // หากคุณต้องการลบเหตุการณ์นี้คุณจะต้องผ่านพารามิเตอร์เดียวกัน </script>ที่นี่เราจะเห็นว่าเมื่อเพิ่มและลบเหตุการณ์วิธีสุดท้ายนั้นตรงและง่ายที่สุด อย่างไรก็ตาม Ma Haixiang เตือนทุกคนว่าเมื่อประมวลผลเหตุการณ์การลบพารามิเตอร์ที่ผ่านจะต้องสอดคล้องกับพารามิเตอร์ก่อนหน้านี้มิฉะนั้นการลบจะไม่ถูกต้อง!
4. กระบวนการและความแตกต่างระหว่างฟองสบู่เหตุการณ์และการจับเหตุการณ์
ต้องบอกว่าให้ฉันให้รหัสบางอย่างเพื่ออธิบายกระบวนการของฟองสบู่และการจับเหตุการณ์และในเวลาเดียวกันให้คุณเห็นความแตกต่างระหว่างทั้งสอง:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <title> เอกสาร </title> <style> #p {width: px; ความสูง: px; border: px solid black;} #c {width: px; www.mahaixiang.cn <div id = "c"> ฉันชอบ www.mahaixiang.cn </div> </div> <script> var p = document.getElementById ('P'); var c = document.getElementById ('C'); c.addeventListener ('คลิก', function () {Alert ('การจับโหนดลูก')}, จริง); C.addeventListener ('คลิก', ฟังก์ชัน () {Alert ('ลูกฟองโหนดลูก')}, เท็จ); p.addeventListener ('คลิก', function () {Alert ('เด็กโหนดลูกฟอง')}, false); </script> </body> </html>เมื่อเรียกใช้รหัสด้านบนและคลิกที่องค์ประกอบลูกเราจะพบว่าลำดับของการดำเนินการคือ: โหนดการจับโหนดโหนดการจับภาพโหนดลูกฟองสบู่โหนดบับเบิลโหนด จากตัวอย่างนี้เราสามารถเข้าใจได้ว่านอกจากนี้เหตุการณ์ระดับ DOM2 กำหนดว่าเหตุการณ์นั้นรวมถึงสามขั้นตอน:
1. เวทีจับเหตุการณ์;
2. ในช่วงเป้าหมาย
3. เวทีฟองเหตุการณ์
ครั้งแรกมันคือการจับภาพจากนั้นในขั้นตอนเป้าหมาย (นั่นคือไปยังสถานที่ที่มีการออกเหตุการณ์) และในที่สุดก็มีฟอง สิ่งที่ไม่มีหลักการคือไม่มีโปรแกรมการจัดการเหตุการณ์ระดับ DOM1 โปรดให้ความสนใจและหยุดทำเรื่องตลก!
5. อาหารเสริม
1. ตัวจัดการเหตุการณ์ IE ยังมีสองวิธี: แนบ () เพิ่มเหตุการณ์และ detachevent () ลบเหตุการณ์ ทั้งสองวิธีนี้ได้รับพารามิเตอร์สองตัวเดียวกัน: ชื่อตัวจัดการเหตุการณ์และฟังก์ชั่นการประมวลผลธุรกรรม ทำไมไม่มีค่าบูลีนที่นี่? เนื่องจาก IE8 และเวอร์ชันก่อนหน้านี้รองรับฟองสบู่เหตุการณ์พารามิเตอร์สุดท้ายจึงเทียบเท่ากับเท็จโดยค่าเริ่มต้นในการจัดการ! (เบราว์เซอร์ที่รองรับตัวจัดการกิจกรรมรวมถึง IE, Opera)
2. วัตถุเหตุการณ์เป็นวัตถุที่ใช้ในการบันทึกข้อมูลที่เกี่ยวข้องเมื่อมีเหตุการณ์บางอย่างเกิดขึ้น แต่วัตถุเหตุการณ์จะถูกสร้างขึ้นเมื่อเหตุการณ์เกิดขึ้นและสามารถเข้าถึงได้ภายในฟังก์ชันตัวจัดการเหตุการณ์เท่านั้น หลังจากฟังก์ชั่นตัวจัดการเหตุการณ์ทั้งหมดทำงานวัตถุเหตุการณ์จะถูกทำลาย!
ข้างต้นเป็นวิธีจัดการเหตุการณ์ JavaScript (สามประเภท) แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!