บับเบิ้ลเหตุการณ์และการจับเหตุการณ์ใน Javascript อธิบาย: วิธีการใช้งาน?

เผยแพร่แล้ว: 2020-03-26

สารบัญ

บทนำ

คำศัพท์ทั่วไปสองคำที่ใช้สำหรับการไหลของเหตุการณ์ใน JavaScript คือ Event Bubbling และ Event Capturing

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

ประเด็นที่สำคัญ

  • อธิบายคำศัพท์ เหตุการณ์ กระแสเหตุการณ์ ตัวจัดการเหตุการณ์ และผู้ฟังเหตุการณ์
  • บับเบิ้ลเหตุการณ์และการจับเหตุการณ์ ใน JavaScript
  • ยูทิลิตี้ของการ บับเหตุการณ์และการจับเหตุการณ์ ใน JavaScript

เหตุการณ์และกระแสเหตุการณ์

การโต้ตอบของหน้าเว็บ HTML กับ JavaScript ถูกสื่อกลางโดยเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้หรือเบราว์เซอร์จัดการหน้าเว็บ การโหลดหน้า ผู้ใช้คลิกปุ่ม ปิดหน้าต่าง ล้วนเป็นตัวอย่างของเหตุการณ์

ลำดับที่เหตุการณ์ได้รับบนหน้าเว็บเรียกว่าเป็นลำดับเหตุการณ์ กระบวนการโฟลว์เหตุการณ์เสร็จสมบูรณ์ใน 3 ขั้นตอน – การบันทึกเหตุการณ์ (การสกัดกั้นเหตุการณ์) การกำหนดเป้าหมายเหตุการณ์ (เป้าหมายรับเหตุการณ์) และการเกิดฟองของเหตุการณ์ (การตอบสนองต่อเหตุการณ์)

ตัวจัดการเหตุการณ์และผู้ฟังเหตุการณ์ใน JavaScript

ตัวจัดการเหตุการณ์คือโค้ด JavaScript ที่เขียนขึ้นภายในแท็ก HTML แทนที่จะเป็นแท็ก <script> ตัวจัดการเหตุการณ์เรียกใช้ JavaScript เมื่อเกิดเหตุการณ์เช่นการกดปุ่ม ไวยากรณ์พื้นฐานคือ: name_of_handler=”รหัส JavaScript ที่นี่”

<a href=”https://www.google.com” onClick=”alert('hello!”)”>Google</a>

โพรซีเดอร์ที่รอการเกิดขึ้นของเหตุการณ์คือ Event Listener JavaScript มีฟังก์ชันในตัวคือ addEventListener() ที่รับเหตุการณ์ที่จะรับฟัง และเรียกอาร์กิวเมนต์ที่สองเมื่อเหตุการณ์ดังกล่าวเริ่มทำงาน ไวยากรณ์คือ: element.addEventListener(event, listener);

เหตุการณ์เดือดปุด ๆ ใน JavaScript

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

แหล่งที่มา

<!DOCTYPE HTML>
<html>
<head>
<title>……</title>
</head>
<body>
<div id=”demo”> กดที่นี่</div>
</body>
</html>

เมื่อคลิกองค์ประกอบ <div> เหตุการณ์ 'คลิก' จะเกิดขึ้นตามลำดับต่อไปนี้:

  1. <div>
  2. <body>
  3. <html>
  4. เอกสาร

เหตุการณ์ 'คลิก' เริ่มต้นองค์ประกอบ <div> ต่อมาแต่ละโหนดจะเริ่มทำงานตามแผนผัง DOM ขึ้นไป จนกว่าจะถึงเอกสารอ็อบเจ็กต์

อ่าน: แนวคิดและหัวข้อโครงการเต็มสแต็ก

จับภาพเหตุการณ์ใน JavaScript

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

แหล่งที่มา

อ้างอิงจากตัวอย่างที่ระบุไว้ในส่วนก่อนหน้า การคลิกองค์ประกอบ <div> จะทำให้เกิดเหตุการณ์ 'คลิก' ตามลำดับต่อไปนี้:

  1. เอกสาร
  2. <body>
  3. <html>
  4. <div>

จะเกิดอะไรขึ้นในขั้นตอนการจับภาพเหตุการณ์

ในขั้นตอนการบันทึกเหตุการณ์ ระบบจะเรียกผู้ฟังของผู้ดักจับซึ่งค่าที่ลงทะเบียนเป็น "จริง" จะถูกเรียก มันเขียนในลักษณะต่อไปนี้:

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

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

โฟลว์เหตุการณ์ DOM ใน JavaScript

DOM ระดับ 2 ระบุสามขั้นตอนให้กับโมเดลของกระแสเหตุการณ์:

  • ขั้นตอนการจับภาพเหตุการณ์
  • ที่เป้าหมาย
  • เหตุการณ์เดือดปุดๆ

แหล่งที่มา

หากมีโอกาสสกัดกั้นเหตุการณ์ การจับภาพเหตุการณ์จะเกิดขึ้นก่อน ตามด้วยเป้าหมายจริงที่ได้รับเหตุการณ์ ในที่สุด ที่ Event Bubbling Phase การตอบสนองขั้นสุดท้ายต่อเหตุการณ์ก็เกิดขึ้น อ้างอิงจากตัวอย่างที่ระบุไว้ในส่วนก่อนหน้า การคลิกองค์ประกอบ <div> จะทำให้เกิด 'คลิก' ของเหตุการณ์ตามลำดับที่แสดงในไดอะแกรมด้านบน

อ่าน: เงินเดือนนักพัฒนาเต็มกองในอินเดีย

ยูทิลิตี้ของการ บับเหตุการณ์และการจับเหตุการณ์ ใน JavaScript

ใน Event Bubbling Phase จะเรียกเฉพาะเหตุการณ์ที่มีค่าแฟล็ก "เท็จ" (ไม่ใช่ตัวจับภาพ) Event Bubbling และ Event Capturing เป็นแง่มุมที่สำคัญของ DOM

el.addEventListener('Click', listener, false) // ผู้ฟังไม่ได้จับ
el.addEventListener('Click', listener) // ผู้ฟังไม่ได้จับ

โค้ดด้านบนนี้เป็นตัวอย่างวิธีการทำงานของฟองสบู่และขั้นตอนการจับภาพ ทุกเหตุการณ์ไม่ถึงเป้าหมาย บางเหตุการณ์ไม่เกิดฟองขึ้นและหยุดโพสต์เฟสเป้าหมาย เหตุการณ์เดือดปุด ๆ ใช้ไม่ได้กับเหตุการณ์ทุกประเภทและผู้ฟังควรมีคุณสมบัติบูลีน ".bubble" ของวัตถุของเหตุการณ์นอกเหนือจากมีคุณสมบัติอื่น ๆ เช่น – e.target (เพื่ออ้างอิงเป้าหมายของเหตุการณ์) และ e.eventPhase (ผู้ฟังปัจจุบันลงทะเบียนในโหมดนี้)

บทสรุป

โฟลว์เหตุการณ์ใน JavaScript มีสามขั้นตอนที่สำคัญ – ระยะการจับเหตุการณ์ ระยะเป้าหมาย และระยะการเดือดของเหตุการณ์ การบันทึกเหตุการณ์เป็นสิ่งแรกที่จะเกิดขึ้น โดยที่เหตุการณ์จะถูกสกัดกั้นหากจำเป็น ตามด้วยเหตุการณ์ที่ไปถึงเป้าหมายจริงและขั้นตอนสุดท้ายกำลังเดือดปุด ๆ เมื่อการตอบสนองขั้นสุดท้ายต่อเหตุการณ์เกิดขึ้น ดังนั้นจึงสรุปได้อย่างเหมาะสมว่า Event Bubbling และ Event Capturing ใน JavaScript เป็นพื้นฐานที่ตัวจัดการเหตุการณ์และการมอบหมายเหตุการณ์ขึ้นอยู่กับ

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับฟูลสแตก โปรดดูประกาศนียบัตร PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง โครงการและการมอบหมายมากกว่า 9 รายการ IIIT- สถานะศิษย์เก่า B, โครงการหลักที่นำไปปฏิบัติได้จริง & ความช่วยเหลือด้านงานกับบริษัทชั้นนำ

ลงจอดบนงานในฝันของคุณ

UPGRAD และ PG DIPLOMA ของ IIIT-BANGALORE ในการพัฒนาซอฟต์แวร์
เรียนรู้เพิ่มเติม @ upGrad