Fahami secara ringkas tentang menggelegak, perwakilan, pengikatan dan penyebaran peristiwa JavaScript

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya menganjurkan isu yang berkaitan dengan menggelegak, perwakilan, pengikatan dan penyebaran acara JavaScript, termasuk acara menggelegak, Perwakilan Acara, acara pengikatan melalui addEventListener(), dsb. Mari kita lihat mereka bersama-sama. Saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Acara gelembung

1. Acara menggelegak bermakna peristiwa itu pada mulanya diterima oleh elemen yang paling khusus, dan kemudian merambat ke atas kepada nod yang kurang spesifik.
2. Acara menggelegak didayakan secara lalai, tetapi acara menggelegak boleh dikawal melalui kod js.

Ciri:

• Apabila fungsi acara kami dicetuskan, fungsi acara sebenarnya akan menerima objek acara.

• Apabila kami melaksanakan kaedah event.stopPropagation() dalam fungsi acara kami, acara menggelegak berakhir di sini.

• Bukan semua jenis acara menyokong acara menggelegak.

• Acara menggelegak hanya akan mencetuskan fungsi acara daripada jenis yang sama.

Dua cara untuk mengelakkan kejadian menggelegak

Terdapat dua cara untuk mengelakkan kejadian menggelegak, satu daripadanya ialah atribut dan satu lagi kaedah.

batalBubble

Menetapkan atau mengembalikan sama ada acara itu perlu disebarkan ke atas hierarki.

Sintaks: event.cancelBubble = true;

stopPropagation()

Menghalang acara daripada disebarkan lebih jauh dalam strim acara.

Sintaks: event.stopPropagation();

Contoh: Ikat fungsi tindak balas klik pada tiga objek yang saling induk dan anak.

window.onload = function(){
      var span = document.getElementById("sp");
      span.onclick = function(){
          alert('span标签');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = function(){
          alert('box3');
      }
      var body = document.body;
      body.onclick = function(){
          alert('body');
      }}

Elakkan menggelegak di dalam kotak:

window.onload = function(){
      var span = document.getElementById("sp");
      span.onclick = function(){
          alert('span标签');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = function(event){
          alert('box3');
           event.stopPropagation();

      }
      var body = document.body;
      body.onclick = function(){
          alert('body');
      }}

Acara perwakilan

Apabila kita ada Apabila longgokan sub-teg mempunyai peristiwa yang sama, anda boleh menambah peristiwa padanya dengan melintasi sub-teg Walau bagaimanapun, jika elemen sub-teg baharu ditambahkan, anda mesti mengikat semula elemen sub-teg baharu, jika tidak, ia akan menjadi tidak sah.

Ciri

mengikat acara dengan elemen moyang , supaya apabila peristiwa pada elemen kanak-kanak dicetuskan, ia akan sentiasa menggelembung ke moyang. elemen , dengan itu mengendalikan acara melalui acara tindak balas elemen moyang. Menggunakan menggelegak dan perwakilan, anda boleh mengurangkan bilangan pengikatan acara dan meningkatkan prestasi program.

Dapatkan elemen yang diklik

Apabila kita mengikat sesuatu peristiwa dengan unsur nenek moyang, tidak kira unsur mana yang kita klik di dalam unsur nenek moyang, peristiwa yang sepadan akan dicetuskan Apabila sesuatu peristiwa dicetuskan hanya dengan mengklik pada elemen dalam elemen nenek moyang, syarat pertimbangan perlu diberikan pada masa ini untuk menentukan sama ada ia adalah elemen yang kita mahu mencetuskan peristiwa itu.

sasaran

Mengembalikan elemen yang mencetuskan acara.

Sintaks: event.taget;

window.onload = function(){
     var ul = document.getElementById('ul1');
     ul.onclick = function(event){
         if(event.target.className == 'abq'){
             alert('事件触发！！')
         } 
     }
     //添加超链接
     document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a>新建的标签</a>";
         ul.appendChild(li);
     }
 }

Ikat acara melalui addEventListener()

Lulus Kaedah ini boleh mengikat berbilang fungsi tindak balas peristiwa yang sama kepada elemen yang sama.

• Parameter:

1. Rentetan acara, jangan hidupkan
2. fungsi panggil balik, fungsi ini akan dipanggil apabila acara itu dicetuskan
3. Sama ada untuk mencetuskan acara semasa fasa tangkapan memerlukan nilai Boolean, lalainya adalah palsu

Gunakan addEventListener() untuk mengikat berbilang fungsi respons kepada peristiwa yang sama bagi sesuatu elemen pada masa yang sama, supaya apabila peristiwa dicetuskan, fungsi tindak balas akan dilaksanakan dalam susunan fungsi terikat!

window.onload = function(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('click',function(){
        alert('触发的第一个单击相应函数！')
    },false);
    bt.addEventListener('click',function(){
        alert('触发的第二个单击相应函数！')
    },false);
    bt.addEventListener('click',function(){
        alert('触发的第三个单击相应函数！')
    },false);}

事件的传播

• 关于事件的传播网景公司和微软公司有不同的理解：
  微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
  网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
• 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('click',function(){
         alert('box1');
     },false);
     box2.addEventListener('click',function(){
         alert('box2');
     },false);
     box3.addEventListener('click',function(){
         alert('box3');
     },false);
 }

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true！

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         alert('box1');
     },true);
     box2.addEventListener('click',function(){
         alert('box2');
     },true);
     box3.addEventListener('click',function(){
         alert('box3');
     },true);
 }

【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Fahami secara ringkas tentang menggelegak, perwakilan, pengikatan dan penyebaran peristiwa JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!