Menganalisis mekanisme dan penggunaan acara menggelegak

Acara menggelegak ialah mekanisme penyampaian acara yang sering digunakan dalam pembangunan bahagian hadapan. Dalam artikel ini, kami akan menerangkan secara terperinci prinsip dan aplikasi acara menggelegak, dan menyediakan contoh kod untuk membantu pembaca memahami dengan lebih baik. . Dalam erti kata lain, acara diluluskan bermula dengan elemen yang paling khusus dan berkembang kepada elemen yang lebih umum.

Prinsip peristiwa menggelegak boleh disimpulkan kepada perkara berikut:

Penyebaran peristiwa adalah daripada unsur anak kepada unsur induk, sehinggalah kepada unsur akar.

Peristiwa unsur anak akan diserahkan kepada unsur induknya, dan kemudian diteruskan ke unsur induk satu tahap di atas, sehingga unsur akar.
1. Semasa proses penghantaran acara, jika elemen induk setiap lapisan terikat pada pengendali acara yang sama, maka pengendali acara ini akan dipanggil. . Pendekatan ini boleh meningkatkan kebolehselenggaraan dan kecekapan pelaksanaan kod.
3. Sebagai contoh, kami mempunyai div elemen induk, yang mengandungi berbilang butang elemen anak dan pengendali acara klik yang sama pada setiap butang. Jika kami menggunakan acara menggelegak, kami hanya perlu mengikat acara ke div elemen induk sekali, seperti yang ditunjukkan di bawah:

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  console.log(e.target.innerHTML + '被点击了');
});
</script>

Dalam kod di atas, kami mengikat pengendali acara klik pada div elemen induk. Apabila butang elemen anak diklik, acara menggelembung ke div elemen induk dan mencetuskan pengendali acara elemen induk. Dengan mencetak atribut sasaran objek acara, kita boleh mendapatkan butang klik tertentu.

Delegasi acara: Delegasi acara ialah teknologi biasa yang menggunakan mekanisme menggelegak acara untuk mengendalikan elemen yang ditambah secara dinamik. Dengan mengikat pengendali acara kepada elemen induk, peristiwa yang sepadan boleh dicetuskan pada elemen anak yang ditambah secara dinamik.

Sebagai contoh, kami menambahkan butang butang baharu secara dinamik dalam contoh sebelumnya, seperti yang ditunjukkan di bawah:

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'button') {
    console.log(e.target.innerHTML + '被点击了');
  }
});

var newButton = document.createElement('button');
newButton.innerHTML = '新按钮';
parentElement.appendChild(newButton);
</script>

Dalam kod di atas, kami mengikat pengendali acara klik pada div elemen induk, dengan menilai acara Sama ada sasaran yang dicetuskan elemen ialah butang untuk menapis elemen yang tidak perlu diproses. Dengan cara ini kita boleh mengendalikan acara klik untuk elemen yang ditambah secara dinamik tanpa perlu mengikat acara berasingan untuk setiap elemen yang baru ditambah.

Hentikan penyebaran acara: Dengan memanggil kaedah stopPropagation() objek acara dalam pengendali acara, anda boleh menghentikan penghantaran acara yang berterusan.

Sebagai contoh, kami mengikat acara klik pada butang elemen kanak-kanak dan memanggil kaedah stopPropagation() dalam pengendali acara, seperti yang ditunjukkan di bawah:

<div id="parentElement">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
</div>

<script>
var buttons = document.getElementsByTagName('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    console.log(e.target.innerHTML + '被点击了');
    e.stopPropagation();
  });
}

var parentElement = document.getElementById('parentElement');
parentElement.addEventListener('click', function(e) {
  console.log('父元素被点击了');
});
</script>

Dalam kod di atas, apabila butang elemen kanak-kanak diklik, acara itu akan dicetuskan Pengendali acara klik bagi elemen anak itu sendiri dan memanggil kaedah stopPropagation() untuk menghentikan acara daripada terus dihantar. Oleh itu, pengendali acara klik elemen induk tidak akan dipecat.

Ringkasan:

Acara menggelegak ialah mekanisme penyampaian acara yang biasa digunakan dalam pembangunan bahagian hadapan, yang boleh memudahkan pengikatan acara, melaksanakan delegasi acara dan mengawal penyampaian acara. Dengan menggunakan acara menggelegak dengan betul, kami boleh meningkatkan kebolehselenggaraan dan kecekapan pelaksanaan kod kami.

Atas ialah kandungan terperinci Menganalisis mekanisme dan penggunaan acara menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!