ทำความเข้าใจสั้นๆ เกี่ยวกับ bubbling การมอบหมาย การเชื่อมโยง และการเผยแพร่เหตุการณ์ JavaScript

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

1. : เหตุการณ์เดือดปุด ๆ หมายความว่าองค์ประกอบที่เฉพาะเจาะจงที่สุดได้รับเหตุการณ์ในตอนแรก จากนั้นจึงแพร่กระจายขึ้นไปบนโหนดที่เฉพาะเจาะจงน้อยกว่า
2. เหตุการณ์ bubbling ถูกเปิดใช้งานตามค่าเริ่มต้น แต่เหตุการณ์ bubbling สามารถควบคุมได้ผ่านโค้ด js

คุณสมบัติ:

• เมื่อฟังก์ชันเหตุการณ์ของเราถูกทริกเกอร์ ฟังก์ชันเหตุการณ์จะได้รับออบเจ็กต์เหตุการณ์จริงๆ

• เมื่อเรารันเมธอด event.stopPropagation() ในฟังก์ชัน event ของเรา เหตุการณ์เดือดปุดๆ จะสิ้นสุดที่นี่

• กิจกรรมบางประเภทไม่สนับสนุนกิจกรรมที่กำลังเดือดพล่าน

• เหตุการณ์ฟองสบู่จะทริกเกอร์ ฟังก์ชันเหตุการณ์ประเภทเดียวกัน เท่านั้น

สองวิธีในการป้องกันเหตุการณ์ที่เดือดปุด ๆ

มีสองวิธีในการป้องกันเหตุการณ์ที่เดือดปุด ๆ วิธีหนึ่งคือคุณสมบัติและอีกวิธีหนึ่งคือวิธีการ

cancelBubble

ตั้งค่าหรือส่งคืนว่าเหตุการณ์ควรจะเผยแพร่ไปยังระดับบนหรือไม่

ไวยากรณ์: event.cancelBubble = true;

stopPropagation()

ป้องกันไม่ให้เหตุการณ์แพร่กระจายต่อไปในสตรีมเหตุการณ์

ไวยากรณ์: event.stopPropagation();

ตัวอย่าง: ผูกฟังก์ชันตอบสนองการคลิกกับวัตถุสามรายการที่เป็นพาเรนต์และลูกร่วมกัน

window.onload = ฟังก์ชั่น () {
      var span = document.getElementById("sp");
      span.onclick = ฟังก์ชั่น () {
          alert('แท็กช่วง');
          
      -
      กล่อง var = document.getElementById('box3');
      box3.onclick = ฟังก์ชั่น(){
          alert('box3');
      -
      var body = document.body;
      body.onclick = ฟังก์ชั่น () {
          alert('เนื้อหา');
      }}

ป้องกันการเดือดปุด ๆ สำหรับกล่อง:

window.onload = ฟังก์ชั่น () {
      var span = document.getElementById("sp");
      span.onclick = ฟังก์ชั่น () {
          alert('แท็กช่วง');
          
      -
      กล่อง var = document.getElementById('box3');
      box3.onclick = ฟังก์ชั่น (เหตุการณ์) {
          alert('box3');
           เหตุการณ์.stopPropagation();

      -
      var body = document.body;
      body.onclick = ฟังก์ชั่น () {
          alert('เนื้อหา');
      }}

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

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

แอตทริบิวต์

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

รับองค์ประกอบที่ถูกคลิก

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

target

ส่งคืนองค์ประกอบที่ทำให้เกิดเหตุการณ์

ไวยากรณ์: event.taget;

window.onload = ฟังก์ชั่น () {
     var ul = document.getElementById('ul1');
     ul.onclick = ฟังก์ชั่น (เหตุการณ์) {
         ถ้า (event.target.className == 'abq'){
             alert('เหตุการณ์ถูกกระตุ้น!!')
         - 
     -
     //เพิ่มไฮเปอร์ลิงก์ document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>แท็กใหม่</a>";
         ul.ผนวกเด็ก(li);
     -
 }

เชื่อมโยงเหตุการณ์ผ่าน addEventListener()

ด้วยวิธีการนี้ คุณสามารถเชื่อมโยงฟังก์ชันตอบสนองเหตุการณ์ที่เหมือนกันหลายรายการเข้ากับองค์ประกอบเดียวกันได้

• พารามิเตอร์:

1. สตริงของเหตุการณ์ ไม่ใช้
2. ฟังก์ชันการโทรกลับ ฟังก์ชันนี้จะถูกเรียกเมื่อเหตุการณ์ถูกทริกเกอร์
3. หรือ

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

window.onload = ฟังก์ชั่น () {
    var bt = document.getElementById('bt1');
    bt.addEventListener('คลิก',function(){
        alert('ฟังก์ชันที่สอดคล้องกับการคลิกครั้งแรกถูกกระตุ้น!')
    },เท็จ);
    bt.addEventListener('คลิก',function(){
        alert('ฟังก์ชันที่สอดคล้องกับการคลิกครั้งที่สองถูกกระตุ้น!')
    },เท็จ);
    bt.addEventListener('คลิก',function(){
        alert('ฟังก์ชันที่สอดคล้องกับคลิกครั้งที่สามถูกกระตุ้น!')
    }, false);}

การเผยแพร่เหตุการณ์

• Netscape และ Microsoft มีความเข้าใจที่แตกต่างกันเกี่ยวกับการเผยแพร่เหตุการณ์:
  Microsoft เชื่อว่าเหตุการณ์ควรได้รับการเผยแพร่ จากภายในสู่ภายนอก นั่นคือเมื่อมีการทริกเกอร์เหตุการณ์ เหตุการณ์ในองค์ประกอบปัจจุบันควรถูกทริกเกอร์ก่อน จากนั้นจึงเผยแพร่ไปยังองค์ประกอบบรรพบุรุษขององค์ประกอบปัจจุบัน ซึ่งหมายความว่าเหตุการณ์ควร จะถูก ประหารชีวิตในขั้นฟองสบู่
  Netscape เชื่อว่าเหตุการณ์ควรถูกเผยแพร่ จากภายนอกเข้ามาด้าน ใน นั่นคือเมื่อเหตุการณ์ปัจจุบันถูกทริกเกอร์ เหตุการณ์ขององค์ประกอบบรรพบุรุษที่อยู่นอกสุดขององค์ประกอบปัจจุบันควรถูกทริกเกอร์ก่อน จากนั้นจึงแพร่กระจายภายในไปยังองค์ประกอบที่สืบทอด
• W3C รวมโซลูชันของทั้งสองบริษัทและแบ่งการแพร่กระจายเหตุการณ์ออกเป็นสามขั้นตอน:

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

ฟังก์ชันตอบสนองจะดำเนินการในระหว่างขั้นตอนการเดือดปุด ๆ พารามิเตอร์ที่สามเริ่มต้นคือ false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('คลิก',ฟังก์ชัน(){
         alert('box1');
     },เท็จ);
     box2.addEventListener('คลิก',ฟังก์ชัน(){
         alert('box2');
     },เท็จ);
     box3.addEventListener('คลิก',ฟังก์ชัน(){
         alert('box3');
     },เท็จ);
 -

หากคุณต้องการทริกเกอร์เหตุการณ์ในระหว่างขั้นตอนการจับภาพ คุณสามารถตั้งค่าพารามิเตอร์ตัวที่สามของ addEventListener() ให้เป็นจริง!

window.onload = ฟังก์ชั่น () {
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('คลิก',ฟังก์ชัน(){
         alert('box1');
     },จริง);
     box2.addEventListener('คลิก',ฟังก์ชัน(){
         alert('box2');
     },จริง);
     box3.addEventListener('คลิก',ฟังก์ชัน(){
         alert('box3');
     },จริง);
 -