ในขณะที่พูดถึง แนวคิดหลัก ของ JavaScriptในขณะที่ทำงานกับการพัฒนา UI นั้น " การเผยแพร่เหตุการณ์ " เป็นหนึ่งในหัวข้อที่สำคัญที่สุด

ใน บทความนี้ เราจะพูดถึงแนวคิดของ Event Propagation- Bubbling , Capturing and Delegation

สมมติว่า UI แบบธรรมดาที่เรามีDIV ข้างในนั้น "DIV" มี " แบบฟอร์ม " และในรูปแบบนั้นก็มี " ปุ่ม"อยู่ด้วย

ตอนนี้ให้เราเขียนโค้ด JavaScript อย่างง่ายซึ่งเพิ่มEVENT LISTENERSให้กับทั้งสามแท็ก ได้แก่ div, form & button

1. BUBBLING : ตามชื่อที่แนะนำ เช่นฟองอากาศเหตุการณ์จะเลื่อนจากล่างขึ้นบน ตามโค้ด JS ด้านบน การคลิกที่รายการใดๆ จะแสดง tagName เป็นการแจ้งเตือน

ดังที่คุณเห็นโฟลว์ในการแจ้งเตือนคือ: BUTTON -> FORM -> DIV

2. การจับภาพ(หรือ การหลอกล่อ) :เมื่อเราจับภาพอะไรจากบนลงล่าง ดังที่ชื่อบอกไว้ เหตุการณ์จะถูกกระตุ้นจากบนลงล่าง

รหัส JS สำหรับ TRICKLING:

eventCapturingByRounit (codepen.io)

stopPropagation() วิธี

สมมติว่าเราไม่ต้องการดำเนินการ Bubbling หรือ Trickling อย่างใดอย่างหนึ่ง หมายความว่าเราต้องการให้หากมีการคลิกปุ่ม จากนั้นจะมีเฉพาะเหตุการณ์ onClick Button เท่านั้นที่ทริกเกอร์

การมอบหมายเหตุการณ์: -

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

แนวคิดก็คือว่าหากเรามีองค์ประกอบจำนวนมากที่จัดการในลักษณะเดียวกัน แทนที่จะกำหนดตัวจัดการให้กับแต่ละองค์ประกอบ เราจะใส่ตัวจัดการตัวเดียวในบรรพบุรุษร่วมกัน

eventDelegation โดย Rounit Sinha (codepen.io)

ตัวอย่าง: สมมติว่ามีแอป E-Comm ซึ่งเรามีหมวดหมู่ต่างๆ อยู่ เช่น MOBILE, HEADPHONE เป็นต้น (ตามที่แสดงในโค้ด)

ตอนนี้เราไม่ต้องเพิ่มตัวฟังเหตุการณ์ให้กับหมวดหมู่ทั้งหมดที่มีอยู่ เราสามารถเพิ่มตัวฟังเหตุการณ์ให้กับ div พาเรนต์เท่านั้น ซึ่งเป็นคลาส “Products” ที่นี่

และตอนนี้ เนื่องจากชื่อแท็กสำหรับหมวดหมู่ทั้งหมดคือ "span" เราจึงกรองเฉพาะหมวดหมู่ที่มีชื่อแท็ก "span" และตอนนี้จะเรียกใช้ไปยังชื่อพาธของเฉพาะหมวดหมู่ที่เลือกชื่อแท็กเท่านั้น

อ่านเพิ่มเติมได้ที่การมอบหมายเหตุการณ์ (javascript.info)