มีหลายวิธีในการจัดการเหตุการณ์จาวาสคริปต์

มีสามวิธีในการจัดการเหตุการณ์ JavaScript: 1. ตัวจัดการเหตุการณ์ HTML เพิ่มตัวจัดการเหตุการณ์โดยตรงในโค้ด HTML ไวยากรณ์คือ "<องค์ประกอบเหตุการณ์=ฟังก์ชันเหตุการณ์...>" 2. ตัวจัดการเหตุการณ์ระดับ DOM0 สำหรับ วัตถุที่ระบุ ในการเพิ่มการประมวลผลเหตุการณ์ ไวยากรณ์คือ "องค์ประกอบ object.event=function(){...}"; 3. ตัวจัดการเหตุการณ์ระดับ DOM2 ยังถูกเพิ่มไปยังวัตถุเฉพาะ และส่วนใหญ่จะใช้เพื่อจัดการการดำเนินการของการระบุและ การลบตัวจัดการเหตุการณ์

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, JavaScript เวอร์ชัน 1.8.5, คอมพิวเตอร์ Dell G3

มีหลายวิธีในการจัดการเหตุการณ์จาวาสคริปต์

3 วิธีในการใช้ตัวจัดการเหตุการณ์ Javascript

เมื่อเหตุการณ์เกิดขึ้น เราต้องจัดการมัน มีสามวิธีหลักในการจัดการเหตุการณ์ Javascript:

1. ตัวจัดการเหตุการณ์ HTML

นั่นคือ เราเพิ่มตัวจัดการเหตุการณ์โดยตรงในโค้ด HTML เช่นโค้ดต่อไปนี้:

<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML added event management"); } </script>

จากโค้ดข้างต้น เราจะเห็นว่าการประมวลผลเหตุการณ์นั้นซ้อนอยู่ในองค์ประกอบโดยตรง สิ่งนี้มีปัญหา: การเชื่อมโยงระหว่างโค้ด HTML และ js นั้นแข็งแกร่งเกินไป หากวันหนึ่งคุณต้องการเปลี่ยน showmsg ใน js ไม่ใช่แค่นั้น คุณต้องแก้ไขมันใน js ไหม คุณก็จำเป็นต้องแก้ไขมันใน html ด้วย เราสามารถยอมรับการแก้ไขได้หนึ่งหรือสองครั้ง แต่เมื่อโค้ดของคุณถึงระดับ 10,000 บรรทัด การแก้ไขจะต้องใช้เวลาและเงินเป็นจำนวนมาก เราไม่แนะนำวิธีนี้

2. ตัวจัดการเหตุการณ์ DOM ระดับ 0

นั่นคือการเพิ่มการประมวลผลเหตุการณ์สำหรับวัตถุที่ระบุ ดูที่โค้ดต่อไปนี้:

<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ alert("ระดับ DOM เพิ่มการประมวลผลเหตุการณ์" ); } btn.onclick=null;//หากคุณต้องการลบเหตุการณ์การคลิกของ btn เพียงตั้งค่าเป็น null</script>

จากโค้ดข้างต้น เราจะเห็นว่าเมื่อเทียบกับตัวจัดการเหตุการณ์ HTML เหตุการณ์ DOM ระดับ 0 การเชื่อมโยงระหว่างโค้ด HTML และโค้ด js ลดลงอย่างมาก อย่างไรก็ตาม โปรแกรมเมอร์ที่ชาญฉลาดยังคงไม่พอใจและหวังว่าจะหาวิธีที่ง่ายกว่านี้ในการจัดการกับมัน มาดูวิธีที่สามในการจัดการกับมันกัน

3. ตัวจัดการเหตุการณ์ระดับ DOM2

DOM2 ยังเพิ่มตัวจัดการเหตุการณ์ให้กับอ็อบเจ็กต์เฉพาะ แต่ส่วนใหญ่เกี่ยวข้องกับสองวิธีในการจัดการการดำเนินการของการระบุและการลบตัวจัดการเหตุการณ์: addEventListener() และ RemoveEventListener() พวกเขาทั้งหมดได้รับพารามิเตอร์สามตัว: ชื่อของเหตุการณ์ที่จะจัดการ ฟังก์ชันเป็นตัวจัดการเหตุการณ์ และค่าบูลีน (ไม่ว่าจะจัดการเหตุการณ์ในขั้นตอนการจับภาพ) ดูที่โค้ดต่อไปนี้:

<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//นี่เรา ตั้งค่าสุดท้ายเป็นเท็จ กล่าวคือ จะไม่ถูกประมวลผลในขั้นตอนการจับภาพ โดยทั่วไปแล้ว การประมวลผลแบบฟองจะมีความเข้ากันได้ดีกว่าในเบราว์เซอร์ต่างๆ ฟังก์ชัน showmsg(){ alert("DOM level added event handler"); btn.removeEventListener ("click",showmsg,false);//หากคุณต้องการลบเหตุการณ์นี้ เพียงแค่ส่งพารามิเตอร์เดียวกัน</script>

ที่นี่เราจะเห็นได้ว่าเมื่อเพิ่มและลบการประมวลผลเหตุการณ์ วิธีสุดท้ายจะตรงและง่ายที่สุด อย่างไรก็ตาม Ma Haixiang เตือนทุกคนว่าเมื่อประมวลผลเหตุการณ์การลบ พารามิเตอร์ที่ส่งเข้ามาจะต้องสอดคล้องกับพารามิเตอร์ก่อนหน้า มิฉะนั้นการลบจะไม่ถูกต้อง!

ขยายความรู้ของคุณ:

โฟลว์เหตุการณ์อธิบายลำดับการรับเหตุการณ์บนเพจ ในช่วงแรก ๆ ของการพัฒนาเบราว์เซอร์ ผู้ผลิตเบราว์เซอร์รายใหญ่สองราย IE และ Netscape ขัดแย้งกัน ซึ่งนำไปสู่สถานการณ์ที่น่าหงุดหงิด กระแสเหตุการณ์แตกต่างไปจากเดิมอย่างสิ้นเชิง นั่นคือสิ่งที่เราคุ้นเคย: เหตุการณ์ของ IE ที่เดือดพล่าน, การบันทึกเหตุการณ์ของ Netscape มาถ่ายรูปกันก่อนแล้วค่อยดูโครงสร้าง:

1. เหตุการณ์เดือดปุดๆ

เหตุการณ์เดือดปุด ๆ หมายความว่าองค์ประกอบที่เฉพาะเจาะจงที่สุดได้รับเหตุการณ์ในตอนแรก (โหนดที่มีระดับการซ้อนที่ลึกที่สุดในเอกสาร) จากนั้นจึงแพร่กระจายขึ้นไปบนโหนดที่เฉพาะเจาะจงน้อยที่สุด (เอกสาร) ยกภาพด้านบนมาเป็นตัวอย่าง เมื่อคลิกส่วนของข้อความ องค์ประกอบจะได้รับที่ข้อความก่อน จากนั้นจึงเผยแพร่ไปยังหน้าต่างทีละขั้นตอน นั่นคือกระบวนการ 6-7-8-9-10 ถูกดำเนินการ

2. การจับภาพเหตุการณ์

การจับเหตุการณ์หมายความว่าโหนดที่เฉพาะเจาะจงน้อยกว่าได้รับเหตุการณ์ก่อน และโหนดที่เฉพาะเจาะจงที่สุดจะได้รับเหตุการณ์เป็นอันดับสุดท้าย ในทำนองเดียวกัน ในโมเดลข้างต้น เมื่อคลิกส่วนข้อความ หน้าต่างจะได้รับส่วนนั้นก่อน จากนั้นจึงเผยแพร่ไปยังองค์ประกอบข้อความทีละขั้นตอน นั่นคือ กระบวนการ 1-2-3-4-5 จะถูกดำเนินการ