Event Bubbling และ Event Capturing ใน JavaScript: สิ่งที่คุณต้องรู้



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

Event Bubbling และ Event Capturing เป็นคำศัพท์ที่ใช้มากที่สุดใน JavaScript ในช่วงเวลาของเหตุการณ์ นี่คือสองวิธีในการเผยแพร่เหตุการณ์ใน HTML DOM API บทความนี้เกี่ยวกับ Event Bubbling และ Event Capturing ใน JavaScript จะอธิบายรายละเอียดว่าเหตุใดเราจึงต้องการสิ่งเหล่านี้ใน ตามลำดับต่อไปนี้:

Event Bubbling ใน JavaScript คืออะไร?

Event Bubbling เป็นคำที่ผู้คนต้องเจอในขณะที่พัฒนาเว็บแอปพลิเคชันหรือหน้าเว็บโดยใช้ . โดยทั่วไป Event Bubbling เป็นเทคนิคที่ตัวจัดการเหตุการณ์ถูกเรียกใช้เมื่อไอเท็มหนึ่งซ้อนอยู่บนไอเท็มอื่นและต้องเป็นเหตุการณ์เดียวกัน มันคล้ายกับ Encapsulation





การเดือดของเหตุการณ์ - การฟองเหตุการณ์และการจับเหตุการณ์ใน JavaScript- edureka

Event Bubbling เป็นเพียงส่วนเล็ก ๆ ของการจัดการเหตุการณ์ใน JavaScript เพื่อให้เข้าใจดีขึ้นเราต้องรู้เกี่ยวกับ Event Propagation และวิธีที่รองรับ Event Bubbling



Event Propagation คืออะไร?

การเผยแพร่เหตุการณ์สามารถเปรียบเทียบได้กับคำหลักที่มีเหตุการณ์เดือดปุด ๆ และจับเป็นลูกของมันแสดงเป็นดังนี้:

 

หากคุณคลิกที่ภาพใด ๆ ภาพนั้นจะไม่เพียงสร้างเหตุการณ์การคลิกเท่านั้น แต่ยังส่งต่อไปยัง 'a' และปู่ 'li' ด้วยวิธีนี้การแพร่กระจายของฟังก์ชันจะเกิดขึ้น ภาพนี้ถือเป็นภาพย่อยและเป็นเป้าหมายเหตุการณ์ที่เกิดการคลิก รูปภาพพร้อมกับบรรพบุรุษรวมกันเป็นกิ่งก้านในศัพท์ต้นไม้ สาขามีความสำคัญเมื่อเราต้องรู้จักเส้นทางที่เหตุการณ์แพร่กระจาย



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

  1. ระยะจับภาพ: จากหน้าต่างไปยังเฟสเป้าหมายของเหตุการณ์
  2. ระยะเป้าหมาย: มันเป็นระยะเป้าหมาย
  3. เฟสฟอง: จากพาเรนต์เป้าหมายเหตุการณ์กลับไปที่หน้าต่าง

Event Capturing คืออะไร?

ในขั้นตอนนี้ผู้ฟังแคปเจอร์จะถูกเรียกซึ่งค่าได้รับการบันทึกว่าเป็น 'จริง'. เขียนเป็น:

el.addEventListener ('คลิก', ฟัง, จริง)

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

จากนั้นในระยะเป้าหมายเหตุการณ์ผู้ฟังทั้งหมดที่ลงทะเบียนจะถูกเรียกโดยไม่คำนึงถึงสถานะแฟล็กที่เป็นจริงหรือเท็จ

การใช้ Event Bubbling และการจับเหตุการณ์ใน JavaScript

ในเฟส Bubbling จะเรียกเฉพาะ non-capturer เท่านั้นนั่นคือเหตุการณ์ที่มีค่าแฟล็กเป็น 'เท็จ' การทำให้เป็นฟองและการจับเหตุการณ์มีประโยชน์และสำคัญมากในคำศัพท์ DOM (Document Object Model)

el.addEventListener ('click', listener, false) // listener ไม่จับ el.addEventListener ('click', listener) // listener ไม่จับ

โค้ดด้านบนแสดงการทำงานของเฟสเดือดและการจับภาพ ไม่ใช่ทุกเหตุการณ์ที่จะไปที่เป้าหมายเหตุการณ์ บางส่วนไม่เกิดฟอง การเดินทางของพวกเขาหยุดลงหลังจากระยะเป้าหมาย โฟลว์เฟสเหตุการณ์ทั้งสามแสดงในแผนภาพต่อไปนี้:

การเดือดของเหตุการณ์ไม่สามารถทำได้ในทุกประเภทของเหตุการณ์อย่างไรก็ตามผู้ฟังต้องมี '.ฟอง 'คุณสมบัติบูลีนของวัตถุเหตุการณ์ คุณสมบัติอื่น ๆ บางส่วน ได้แก่ :

  1. e.target: ที่อ้างอิงเป้าหมายเหตุการณ์
  2. e.currentTarget: เป็นโหมดที่ผู้ฟังปัจจุบันได้รับการลงทะเบียน นี่คือค่าอ้างอิงโดยใช้ นี้ คำสำคัญ.
  3. e.eventPhase: เป็นจำนวนเต็มที่อ้างถึงคำหลักอื่น ๆ สามคำเช่น Capturing_phase, Bubbling_phase, AT_Target เฟส

ขั้นตอนการทำงาน

ให้เราดูอย่างละเอียดในภาพประกอบด้านบน ให้เราคลิกองค์ประกอบ“ buttonOne” จากนั้นเหตุการณ์จะถูกทริกเกอร์ทันที โดยปกติเหตุการณ์จะเริ่มต้นการเดินทางจากรากที่เป็นองค์ประกอบบนสุดของต้นไม้ จากนั้นจะไปตามต้นไม้ของเหตุการณ์เป้าหมายนั่นคือ 'buttonOne' นี่คือวิธีการเดินทาง:

ดังที่แสดงในภาพเหตุการณ์ดังกล่าวทำให้ผ่านคำศัพท์ DOM ไปถึงเหตุการณ์เป้าหมายในที่สุด ตอนนี้เมื่อกิจกรรมถึงเป้าหมายมันจะไม่จบลง มันดำเนินไปเรื่อย ๆ ภายในคำศัพท์ DOM ดังที่แสดงในภาพด้านล่าง

เช่นเดียวกับก่อนหน้านี้ทุกองค์ประกอบตามเส้นทางของกิจกรรมขณะที่กำลังดำเนินต่อไปจะได้รับการแจ้งเตือนเกี่ยวกับการมีอยู่ของมัน เมื่อเป็นเช่นนี้คุณต้องคิดว่าเราจะหยุดกระบวนการได้หรือไม่ คำตอบของคำถามคือใช่เราสามารถหยุดการแพร่กระจายของเหตุการณ์ได้ ซึ่งทำได้โดยเรียกใช้ไฟล์ “ stopPropagation” วิธีการของวัตถุเหตุการณ์

ข้อมูลขนาดใหญ่ Hadoop คืออะไร
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' คลิก ', ฟัง (' b2 '))

ด้วยการใช้คำหลักเราสามารถหยุดการเผยแพร่ได้ การทำงานเช่นนี้เมื่อเราใช้คำหลัก“ stopPropagation” ดังนั้นเหตุการณ์ทั้งหมดภายใต้เหตุการณ์หลักจะไม่ถูกเรียกและด้วยเหตุนี้จึงจะไม่ถูกเรียกตามที่กล่าวไว้ในโค้ดข้างต้น มีคำหลักอื่นที่เรียกว่า“ stopImmediatePropagation” ตามชื่อที่บ่งบอกว่าจะหยุดการดำเนินคดีของพี่น้องทันที

ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความของเรา ฉันหวังว่าคุณจะเข้าใจว่า Event Bubbling และ Event Capturing ใน JavaScript คืออะไร

ตอนนี้คุณรู้เกี่ยวกับ Event Bubbling และ Event Capturing ใน JavaScript แล้วให้ดูที่ไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ“ Event Bubbling and Event Capturing in JavaScript” แล้วเราจะติดต่อกลับไป