Ketahui lebih lanjut tentang menggelegak acara dan menangkap dalam JavaScript

Artikel ini akan membawa anda melalui acara menggelegak dan menangkap, dan membolehkan anda memahami kaedah carian sasaran acara js (bergelembung dan menangkap), proksi acara, perbezaan antara e.target dan e.currentTarget, mencegah menggelegak dan menangkap, Batal acara lalai, harap ia membantu semua orang!

1. Cara mencari sasaran acara EventTarget (gelembung dan tangkap)

Sasaran acara merujuk kepada elemen yang terikat dengan acara, elemet .addEventListener('click',function(){}) Elemet di sini ialah sasaran acara.

Gelembung dan menangkap:

• Acara buih:

  • Acara dilaksanakan dengan menggelegak dari bawah ke atas secara lalai. Mengambil peristiwa klik sebagai contoh, apabila kita mengklik pada elemen anak, ia juga boleh mencetuskan peristiwa klik pada elemen induk dan ke atas. Susunan pelaksanaan acara adalah dari bawah ke atas, iaitu acara menggelegak.

• Acara tangkapan:

  • Sudah tentu, terdapat juga kaedah tangkapan atas ke bawah. Masih mengambil peristiwa klik sebagai contoh, apabila elemen kanak-kanak terikat kepada peristiwa klik, dan kami mengklik pada elemen kanak-kanak, peristiwa klik yang terikat pada elemen induk dan elemen di atas juga akan dilaksanakan. Susunan pelaksanaan acara adalah dari atas ke bawah, iaitu acara tangkapan.

addEventListener(type,listener,useCapture) Analisis ringkas:

• jenis: acara Taipkan
• pendengar: fungsi pengendali mendengar acara
• useCapture: tetapkan kaedah carian acara
  • acara yang salah, menggelegak (nilai lalai)
  • benar, peristiwa tangkap

Penggunaan parameter Analisis tangkapan:

Inti penting! ! Keseluruhan proses mencetuskan sasaran acara dibahagikan kepada dua peringkat (menangkap dan menggelegak). useCapture Nilai ini menentukan pada peringkat mana pencetus sasaran acara dilaksanakan.

Analisis jujukan menggelegak dan menangkap:

• Anda boleh melihatnya daripada gambar Dapat dilihat bahawa peristiwa itu ditangkap terlebih dahulu dan kemudian peristiwa itu berbuih. Tangkapan acara adalah dari atas ke bawah (peristiwa luaran dicetuskan dahulu), dan acara menggelegak adalah dari bawah ke atas (peristiwa dalaman dicetuskan dahulu).
• Proses menangkap adalah daripada tidak spesifik kepada khusus, dan proses menggelegak adalah daripada khusus kepada tidak spesifik.
• Walaupun 捕获优先, peristiwa menggelegak ialah kaedah penghantaran lalai. Ini bermakna peristiwa dicetuskan dalam peringkat menggelegak secara lalai.

• Titik! ! Carian untuk sasaran acara dibahagikan kepada dua peringkat: "bubble" dan "capture". Jika terdapat kedua-dua tangkapan dan buih dalam elemen bersarang, tangkapan mesti diutamakan Selepas peristiwa dalam fasa tangkapan dilaksanakan, peristiwa dalam fasa menggelegak akan dilaksanakan.

Demonstrasi kod:

    <div>
        这是div1
        <div>
            这是div2
            <div>这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.addEventListener(&#39;click&#39;,function(){
            console.log("这是div1的点击事件");
        },false);
        div2.addEventListener(&#39;click&#39;,function(){
            console.log("这是div2的点击事件");
        },false);
        div3.addEventListener(&#39;click&#39;,function(){
            console.log("这是div3的点击事件");
        },false);
    </script>

Apabila kita mengklik pada div3, seperti yang dapat dilihat daripada keputusan konsol di bawah, acara di sini Mereka semua dilaksanakan dalam fasa menggelegak.

Masih klik pada div3, kami menukar parameter ketiga div1.addEventListener kepada benar Seperti yang dapat dilihat di bawah, div1 dilaksanakan terlebih dahulu, menunjukkan bahawa fasa tangkapan diutamakan sepanjang fasa menggelegak.

Pastikan anda menaipnya selepas membaca ini Saya tidak menyenaraikan semua situasi yang lain untuk anda cuba dan ringkaskan untuk memahami perkara di atas, pengekodan sebenar tidak akan menjadi sangat rumit).

Di atas adalah pemahaman saya tentang dua mekanisme 冒泡 dan 捕获 untuk carian sasaran acara.

2. Mekanisme proksi acara (delegasi acara)

Gunakan gelembung acara untuk melengkapkan mekanisme proksi acara:

    
• 列表1
    
• 列表2

Apabila kami ingin mengikat acara klik ke li dalam senarai di atas, klik untuk mendapatkan kandungan dalam li Secara umumnya, kami menggunakan untuk untuk melintasi elemen untuk mengikat acara klik.

let lis = document.querySelectorAll('li');
for (let i = 0; i <p>Jika kita mempunyai 10,000 <code>li</code> nod, kita perlu mengikat 10,000 peristiwa menggunakan kaedah di atas, yang sangat mempengaruhi prestasi kod. Oleh itu, kita boleh menggunakan mekanisme menggelegak untuk menyelesaikan masalah di atas, iaitu mengikat acara dengan elemen induk <code>ul</code>. Lihat kod berikut: </p><pre class="brush:php;toolbar:false">
    

        
• 列表1
        
• 列表2
    

    <script> let ul = document.querySelector(&#39;ul&#39;); //我们可以通过事件对象（e）中的target属性可以访问到事件源（也就事件的触发元素） ul.addEventListener(&#39;click&#39;,function(e){ console.log(e.target.innerHTML); },false); </script>

Objek acara (e): Sama ada acara mengikat addEventListener atau langsung ".nama acara", parameter pertama dalam fungsi pemprosesan mendengar acara ialah 事件对象 . Objek acara mengandungi maklumat terperinci tentang acara Contohnya, objek ini mengandungi: sumber acara, id acara, jenis acara, elemen terikat acara, kedudukan yang diklik apabila acara dicetuskan, dsb. Antaranya, e.target boleh mengakses sumber acara, yang merupakan sumber pencetus acara ini.

既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。

依次点击列表1与列表2：

总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。

三、e.target与e.currentTarget的区别：

• e.target 指向的是触发事件监听的对象（事件源）。
• e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。

四、阻止冒泡与捕获

为什么要阻止冒泡或捕获？

点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。

事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。

阻止冒泡或捕获的方法

这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。

阻止冒泡w3c推介的方法是event.stopPropagation()，顾名思义停止传播，他是事件对象（event）的方法，此方法是阻止目标元素的继续冒泡（或捕获）。

event.stopPropagation()阻止冒泡：

    <div>
        这是div1
        <div>
            这是div2
            <div>这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.onclick = function (e) {
           alert(&#39;div1&#39;);
        }
        div2.onclick = function (e) {
           e.stopPropagation();
            alert(&#39;div2&#39;);
        }
        div3.onclick = function (e) {
           alert(&#39;div3&#39;);
        }
    </script>

上面代码默认都是冒泡事件，我们点击div3会依次弹出’div3’与’div2’，为什么没有弹出’div1’这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。

event.stopPropagation()阻止捕获：

    <div>
        这是div1
        <div>
            这是div2
            <div>这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById(&#39;div1&#39;);
        let div2 = document.getElementById(&#39;div2&#39;);
        let div3 = document.getElementById(&#39;div3&#39;);
        div1.addEventListener(&#39;click&#39;,function(e){
           	console.log(&#39;div1&#39;);
        },true);
        div2.addEventListener(&#39;click&#39;,function(e){
            console.log(&#39;div2&#39;);
            e.stopPropagation();
        },true);
        div3.addEventListener(&#39;click&#39;,function(e){
            console.log(&#39;div3&#39;);
        },true);
    </script>

当我们点击div2会依次弹出’div1’与’div2’，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。

event.target == event.currentTarget：

div.addEventListener('click',function(e){
	if(event.target == event.currentTarget){
        //需要执行的代码
    }
});

此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。

五、补充:为什么要使用addEventListener()

从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）：

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

• 它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。
• 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
• 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。

六、取消默认事件

event.preventDefault()

默认事件指的是<a href=""></a>，<input type="submit"> 标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。

   <a>点击跳转</a>
    <script>
        let a = document.querySelector(&#39;a&#39;);
        addEventListener(&#39;click&#39;,function(e){
            e.preventDefault();
        })
    </script>

那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。

return false;

事件执行函数中设置return false取消默认事件，但此方法不常用。

【相关推荐：javascript学习教程】

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang menggelegak acara dan menangkap dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!