Mengapakah peristiwa timbul dan dicetuskan beberapa kali?-tutorial js-php.cn

Mengapakah peristiwa timbul dan dicetuskan beberapa kali?

王林

Lepaskan： 2024-02-19 15:46:06

asal

579 orang telah melayarinya

Mengapakah peristiwa timbul dan dicetuskan beberapa kali?

Mengapa peristiwa menggelegak dicetuskan dua kali?

Acara menggelegak ialah fenomena biasa dalam pembangunan web Ini bermakna apabila peristiwa pada elemen dicetuskan, acara itu akan menggelegak daripada elemen, mencetuskan acara yang sama pada elemen induknya. Walau bagaimanapun, kadangkala kita mendapati bahawa peristiwa dicetuskan dua kali semasa proses menggelegak. Untuk lebih memahami mengapa ini berlaku, kita perlu bermula dengan prinsip acara menggelegak dan menganalisisnya dengan contoh kod tertentu.

Prinsip acara menggelegak adalah berdasarkan struktur pepohon DOM Dalam dokumen HTML, semua elemen disusun menjadi struktur pepohon mengikut perhubungan bersarangnya. Apabila peristiwa dicetuskan, peristiwa itu menggelembung dari elemen tempat peristiwa itu berlaku, di sepanjang elemen induknya, sehingga ia mencapai elemen akar. Semasa proses menggelegak, acara akan mencetuskan pengendali acara yang sama pada setiap elemen induk secara bergilir-gilir. Kelebihan reka bentuk ini ialah pemprosesan delegasi acara boleh dilakukan dengan mudah dan aliran peristiwa semula jadi boleh dicapai.

Walau bagaimanapun, peristiwa menggelegak akan dicetuskan dua kali, terutamanya disebabkan oleh pengikatan yang tidak betul pada fungsi pemprosesan acara atau mekanisme pencegahan peristiwa yang tidak sempurna. Mari lihat contoh kod konkrit:

<!DOCTYPE html>
<html>
<head>
  <title>事件冒泡示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">Click me!</button>
    </div>
  </div>

  <script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    var btn = document.getElementById('btn');

    outer.addEventListener('click', function() {
      console.log('Outer clicked!');
    });

    inner.addEventListener('click', function() {
      console.log('Inner clicked!');
    });

    btn.addEventListener('click', function() {
      console.log('Button clicked!');
      event.stopPropagation();
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kita mempunyai elemen div dengan dua tahap bersarang dan butang bersarang dalam div paling dalam. Kami mengikat pengendali acara klik pada setiap elemen dan butang div, dan mengeluarkan maklumat yang sepadan kepada konsol.

Apabila kita mengklik butang, kita mungkin menjangkakan bahawa "Butang diklik akan dikeluarkan sekali sahaja, tetapi sebenarnya kita akan mendapati ia dikeluarkan dua kali. Ini kerana semasa proses menggelegak acara, acara akan mencetuskan pengendali acara pada setiap elemen induk secara bergilir-gilir Iaitu, apabila butang diklik, pengendali acara klik pada butang akan dicetuskan terlebih dahulu, dan kemudian elemen div paling dalam. akan dicetuskan secara bergilir Dan fungsi pengendali acara pada elemen div paling luar. Memandangkan kami memanggil kaedah event.stopPropagation() dalam pengendali acara butang, kaedah ini akan menghalang acara daripada menggelegak. Walau bagaimanapun, memanggil kaedah ini di dalam pengendali acara tidak akan menghalang pengendali acara seterusnya daripada melaksanakan, jadi pengendali acara pada elemen div paling dalam masih akan dicetuskan sekali. event.stopPropagation()方法，这个方法会阻止事件继续冒泡上去。然而，在事件处理函数内部调用该方法并不会阻止之后的事件处理函数的执行，所以最内层div元素上的事件处理函数还是会被触发一次。

要解决这个问题，我们可以在按钮的事件处理函数中使用event.stopImmediatePropagation()方法，该方法除了阻止事件冒泡，还能够阻止后续事件处理函数的执行。修改代码如下：

btn.addEventListener('click', function(event) {
  console.log('Button clicked!');
  event.stopImmediatePropagation();
});

Salin selepas log masuk

这样，当我们点击按钮时，就只会输出一次"Button clicked!"。

总结来说，事件冒泡会出现两次触发的情况，主要是由于事件处理函数的绑定方式不当或者事件阻止冒泡的机制不完善。我们需要正确地使用event.stopPropagation()和event.stopImmediatePropagation()

Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah event.stopImmediatePropagation() dalam fungsi pemprosesan acara butang Selain menghalang acara daripada menggelegak, kaedah ini juga boleh menghalang pelaksanaan acara berikutnya fungsi pemprosesan. Ubah suai kod seperti berikut: 🎜rrreee🎜Dengan cara ini, apabila kita mengklik butang, "Butang diklik hanya akan dikeluarkan sekali!" 🎜🎜Ringkasnya, peristiwa menggelegak akan dicetuskan dua kali, terutamanya disebabkan oleh pengikatan yang tidak betul pada fungsi pemprosesan acara atau mekanisme pencegahan peristiwa yang tidak sempurna. Kita perlu menggunakan kaedah event.stopPropagation() dan event.stopImmediatePropagation() untuk mengawal menggelegak dan pelaksanaan acara. Hanya dengan memahami prinsip dan mekanisme acara menggelegak dapat menangani masalah yang disebabkan oleh acara menggelegak dan meningkatkan pengalaman pengguna aplikasi web dengan lebih baik. 🎜

Atas ialah kandungan terperinci Mengapakah peristiwa timbul dan dicetuskan beberapa kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!