Menguasai kaedah pengendalian acara menggelegak: Selesaikan masalah yang disebabkan oleh peristiwa menggelegak JS

Selesaikan masalah yang disebabkan oleh peristiwa menggelegak JS: Untuk memahami cara mengendalikan peristiwa menggelegak sekaligus, anda memerlukan contoh kod khusus

Apabila menulis kod JavaScript, kami sering melibatkan pemprosesan acara. Konsep penting dalam pemprosesan acara ialah acara menggelegak. Peristiwa menggelegak bermakna apabila peristiwa pada elemen dicetuskan, elemen induknya juga akan mencetuskan peristiwa yang sama pada gilirannya. Walaupun mekanisme ini boleh menjadi sangat berguna dalam sesetengah situasi, ia kadangkala boleh menyebabkan masalah. Artikel ini akan memperkenalkan cara mengendalikan acara menggelegak dan memberikan contoh kod khusus.

1. Masalah dengan kejadian menggelegak
Sebelum memahami peristiwa menggelegak, mari kita lihat dahulu masalah yang mungkin disebabkan oleh peristiwa menggelegak. Katakan kita mempunyai struktur HTML seperti berikut:

<div class="outer">
  <div class="inner">
    <button class="btn">点击</button>
  </div>
</div>

Kemudian, kita menggunakan JavaScript untuk menambah pengendali acara klik untuk butang:

var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
  console.log('按钮被点击了');
});

Sekarang, apabila kita mengklik butang, kita akan melihat output konsol "Button telah diklik" . Ini adalah perkara biasa kerana kami menambah pengendali acara klik pada butang.

Walau bagaimanapun, katakan kita juga menambah pengendali acara klik pada div luar:

var outer = document.querySelector('.outer');
outer.addEventListener('click', function() {
  console.log('外层div被点击了');
});

Kemudian, apabila kita mengklik butang, bukan sahaja ia akan mengeluarkan "Butang telah diklik", tetapi juga "Div luar telah diklik" " . Ini ialah masalah yang disebabkan oleh peristiwa menggelegak: apabila butang diklik, peristiwa klik juga dicetuskan pada elemen induknya.

2. Cara mengendalikan peristiwa menggelegak
Untuk menyelesaikan masalah yang disebabkan oleh peristiwa menggelegak, kita boleh menggunakan kaedah pemprosesan berikut:

1. Berhenti menggelegak: dengan memanggil stopPropagation kaedah objek acara untuk menghentikan acara menggelegak. Kod sampel adalah seperti berikut: stopPropagation方法，可以停止事件的冒泡。示例代码如下：

var btn = document.querySelector('.btn');
btn.addEventListener('click', function(event) {
  event.stopPropagation(); // 停止冒泡
  console.log('按钮被点击了');
});

2. 阻止默认行为：有些元素默认会执行一些特定的行为，比如点击a标签会跳转到指定链接。通过调用事件对象的preventDefault

var link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  console.log('链接被点击了');
});

Cegah gelagat lalai: Sesetengah elemen akan melakukan gelagat tertentu secara lalai Sebagai contoh, mengklik pada teg akan melompat ke pautan yang ditentukan. Anda boleh menghalang gelagat lalai elemen dengan memanggil kaedah preventDefault objek acara. Kod sampel adalah seperti berikut:

3. var outer = document.querySelector('.outer');
   outer.addEventListener('click', function(event) {
     if (event.target.classList.contains('btn')) { // 判断事件的目标元素是否是按钮
       console.log('按钮被点击了');
     }
   });

Menggunakan delegasi acara: Delegasi acara merujuk kepada pengendali acara yang mengikat kepada elemen induk dan mengendalikan acara pada elemen kanak-kanak melalui mekanisme menggelegak acara. Kaedah ini boleh mengurangkan penggunaan memori dan meningkatkan prestasi. Kod sampel adalah seperti berikut:
rrreee

Melalui perwakilan acara, anda hanya perlu mengikat pengendali acara kepada elemen induk untuk mengendalikan acara berbilang elemen anak, yang sangat memudahkan kod.


Ringkasan: 🎜Apabila menulis kod pemprosesan acara dalam JavaScript, kita perlu memberi perhatian kepada masalah yang disebabkan oleh peristiwa menggelegak. Dengan berhenti menggelegak, menghalang gelagat lalai dan menggunakan perwakilan acara, kami boleh menyelesaikan masalah yang disebabkan oleh peristiwa menggelegak dengan berkesan. Pada masa yang sama, artikel ini juga menyediakan contoh kod khusus, dengan harapan dapat membantu pembaca memahami dengan lebih baik dan menggunakan kaedah pemprosesan acara menggelegak. 🎜

Atas ialah kandungan terperinci Menguasai kaedah pengendalian acara menggelegak: Selesaikan masalah yang disebabkan oleh peristiwa menggelegak JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!