Peristiwa yang tidak sesuai untuk menggunakan mekanisme menggelegak

Kecacatan peristiwa menggelegak: Acara manakah yang tidak sesuai untuk menggunakan mekanisme menggelegak?

Dalam pembangunan bahagian hadapan, mekanisme menggelegak acara adalah kaedah interaksi yang sangat penting. Ia membenarkan peristiwa yang berlaku dalam dokumen HTML dihantar secara berurutan daripada elemen bersarang paling dalam kepada elemen luar. Walau bagaimanapun, walaupun mekanisme menggelegak sangat berguna dalam banyak situasi, ia tidak terpakai kepada semua peristiwa, dan beberapa peristiwa malah boleh menyebabkan kecacatan pada mekanisme menggelegak. Artikel ini akan membincangkan peristiwa yang tidak sesuai untuk menggunakan mekanisme menggelegak dan menggambarkannya dengan contoh kod tertentu.

1. Jenis acara yang tidak sesuai untuk menggunakan mekanisme menggelegak

1. Acara tatal: Acara tatal dicetuskan apabila elemen ditatal. Dalam bekas menatal, jika acara tatal unsur dalam menggelegak ke elemen luar, ia akan menyebabkan masalah prestasi. Pertimbangkan contoh kod berikut:

<div id="outer" style="overflow: scroll; height: 200px;">
  <div id="inner" style="height: 1000px;">
    <p>Scroll inside the inner div</p>
  </div>
</div>
<script>
  document.getElementById('inner').addEventListener('scroll', function(event) {
    console.log('Scroll event bubbled to the outer div');
  }, false);
</script>

Dalam kod di atas, apabila kita menatal pada elemen div dalam, acara tatal menggelembung sehingga ke elemen div luar. Jika elemen div luar mempunyai banyak kandungan, peristiwa tatal menggelegak akan menyebabkan satu siri masalah prestasi.

2. Acara input: Acara input dicetuskan apabila pengguna memasukkan teks atau menukar kandungan dalam kotak teks. Secara umumnya, kami ingin membalas serta-merta dan melakukan beberapa pengesahan atau pemprosesan apabila pengguna memasukkan. Walau bagaimanapun, jika mekanisme menggelegak digunakan, peristiwa input akan menggelembung ke elemen induk setiap kali ia dimasukkan, menyebabkan overhed prestasi yang tidak perlu. Berikut ialah contoh:

<div id="parent">
  <input type="text" id="child">
</div>
<script>
  document.getElementById('parent').addEventListener('input', function(event) {
    console.log('Input event bubbled to the parent div');
  }, false);
</script>

Dalam kod di atas, setiap kali aksara dimasukkan ke dalam kotak teks, acara input menggelembung ke elemen induk. Jika elemen induk mempunyai banyak kandungan, ini akan menyebabkan penyemak imbas kerap memanggil pengendali acara menggelegak, sekali gus mengurangkan prestasi.

2. Bagaimana untuk mengelakkan masalah prestasi yang disebabkan oleh mekanisme menggelegak

Dalam senario di atas, kita boleh menggunakan dua kaedah untuk menyelesaikan masalah prestasi yang disebabkan oleh menggunakan mekanisme menggelegak.

1. stopPropagation() kaedah: Kaedah stopPropagation() boleh menghalang penghantaran menggelegak acara. Apabila kami menentukan bahawa jenis acara tidak sesuai untuk menggelegak, kami boleh memanggil kaedah ini pada permulaan fungsi pengendalian acara untuk menghentikan menggelegak. Berikut ialah contoh kod:

<div id="outer" style="overflow: scroll; height: 200px;">
  <div id="inner" style="height: 1000px;">
    <p>Scroll inside the inner div</p>
  </div>
</div>
<script>
  document.getElementById('inner').addEventListener('scroll', function(event) {
    event.stopPropagation();
    console.log('Scroll event bubbled to the outer div');
  }, false);
</script>

Dalam kod di atas, kami memanggil event.stopPropagation() supaya acara tatal tidak lagi menggelembung ke elemen div luar, sekali gus mengelakkan masalah prestasi yang disebabkan oleh mekanisme menggelegak.

2. Mengikat acara secara langsung: Dalam sesetengah kes, kami boleh mengikat acara secara langsung pada elemen sasaran untuk mengelakkan peristiwa daripada menggelegak kepada elemen induk yang tidak diperlukan. Berikut ialah contoh kod:

<div id="parent">
  <input type="text" id="child">
</div>
<script>
  document.getElementById('child').addEventListener('input', function(event) {
    console.log('Input event on child');
  }, false);
</script>

Dalam kod di atas, kami telah mengikat acara input terus pada elemen kotak teks tanpa menggelegaknya ke elemen induk melalui mekanisme menggelegak. Ini mengelakkan isu prestasi yang disebabkan oleh acara menggelegak.

Ringkasan:

Walaupun mekanisme acara menggelegak sangat berguna dalam banyak situasi, ia tidak terpakai untuk semua acara. Di bawah jenis acara tertentu, seperti acara tatal dan acara input, menggunakan mekanisme menggelegak boleh menyebabkan masalah prestasi. Untuk mengelakkan masalah ini, kita boleh menggunakan kaedah stopPropagation() untuk menghalang acara daripada menggelegak, atau mengikat acara terus kepada elemen sasaran untuk mengelakkan acara daripada menggelegak kepada elemen induk yang tidak diperlukan. Ini memastikan prestasi halaman dan pengalaman pengguna.

Atas ialah kandungan terperinci Peristiwa yang tidak sesuai untuk menggunakan mekanisme menggelegak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!