ทำความเข้าใจฟองสบู่เหตุการณ์และการจับเหตุการณ์

ลำดับเหตุการณ์

สมมติว่าองค์ประกอบอื่นอยู่ในองค์ประกอบหนึ่งและทั้งคู่มีตัวจัดการเหตุการณ์ onclick หากผู้ใช้คลิกที่องค์ประกอบ 2 เหตุการณ์คลิกขององค์ประกอบ 1 และองค์ประกอบ 2 จะถูกเรียกใช้ แต่เหตุการณ์ใดที่เกิดขึ้นก่อน ฟังก์ชันตัวจัดการเหตุการณ์ใดจะถูกดำเนินการก่อน กล่าวอีกนัยหนึ่งสิ่งที่เกิดขึ้นในเหตุการณ์ที่เกิดขึ้น? ดังที่แสดงในรูปด้านล่างเมื่อมีการคลิกพื้นที่องค์ประกอบ SPAN เหตุการณ์การคลิกสามครั้งจะถูกเรียกใช้ แต่คำสั่งคืออะไร?

 <div onclick = "func1"> <p onclick = "func2"> <span onclick = "" func3> </span> </p> </div>

สองรุ่น

NetScape และ Microsoft มีสองวิธีที่แตกต่างกันอย่างสิ้นเชิงในการจัดการเหตุการณ์นี้:

• NetScape สนับสนุนว่าเหตุการณ์จะเกิดขึ้นจากชั้นนอกสุดไปจนถึงองค์ประกอบที่เฉพาะเจาะจงที่สุดและลำดับเหตุการณ์นี้เรียกว่าประเภทการจับภาพ

• Microsoft เก็บกิจกรรมจากองค์ประกอบด้านในสุดแล้วกระจายขึ้นไป ลำดับเหตุการณ์นี้เรียกว่าประเภทฟอง

ลำดับของเหตุการณ์ทั้งสองนี้ตรงข้ามอย่างสมบูรณ์ เบราว์เซอร์ Explorer รองรับกิจกรรมฟองเท่านั้นทั้ง Mozilla, Opera7 และ Konqueror Opera และ ICAB ที่เก่ากว่าไม่สนับสนุน

W3C

เหตุการณ์ใด ๆ ที่เกิดขึ้นในรูปแบบเหตุการณ์ W3C เข้าสู่ขั้นตอนการจับภาพครั้งแรกจนกว่าจะถึงองค์ประกอบเป้าหมายแล้วเข้าสู่ขั้นตอนฟอง

สำหรับการพัฒนาเว็บปกติคุณสามารถเลือกได้ว่าจะผูกฟังก์ชั่นตัวจัดการเหตุการณ์ในขั้นตอนการจับภาพหรือขั้นตอนฟอง นี่คือความสำเร็จผ่านวิธี AddEventListener () หากพารามิเตอร์ USEcapture ของฟังก์ชั่นนี้เป็นจริงฟังก์ชั่นจะถูกผูกไว้ในขั้นตอนการจับภาพและในทางกลับกันฟังก์ชั่นจะถูกผูกไว้ในขั้นตอนฟอง

 element.addeventListener (เหตุการณ์, ฟังก์ชั่น, usecapture)

หยุดฟองสบู่

ในระหว่างการพัฒนาปกติหากคุณต้องการป้องกันการแพร่กระจายของเหตุการณ์คุณสามารถทำได้ด้วยวิธีเดียว

ในโมเดลของ Microsoft คุณต้องตั้งค่าคุณสมบัติ CancelBubble ของเหตุการณ์เป็นจริง

 window.event.cancelBubble = true

ในโมเดล W3C คุณต้องเรียกวิธีการ stoppropagation () ของเหตุการณ์

 E.StopPropagation ()

การเรียกวิธีการเหล่านี้จะป้องกันไม่ให้ฟองทั้งหมดแพร่กระจายออกไปด้านนอก โซลูชันข้ามเบราว์เซอร์:

 ฟังก์ชั่น dosomething (e) {ถ้า (! e) {var e = window.event; E.CancelBubble = true; } if (E.StopPropagation) {E.StopPropagation (); -

บทความข้างต้นความเข้าใจในเชิงลึกเกี่ยวกับฟองสบู่และการจับเหตุการณ์เป็นเนื้อหาทั้งหมดที่ฉันได้แบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น