Bincangkan sama ada boleh menggunakan JavaScript untuk mendapatkan semua elemen yang dilalui oleh acara

JavaScript ialah bahasa pengaturcaraan yang sangat popular yang sering digunakan untuk melaksanakan halaman web dan aplikasi interaktif. Acara menggelegak ialah konsep penting dalam pengaturcaraan JavaScript Ia membolehkan pengaturcara mengendalikan acara dengan lebih mudah dalam halaman web Walau bagaimanapun, dalam pembangunan sebenar, kita mungkin menghadapi senario di mana kita perlu mendapatkan semua elemen yang melaluinya gelembung acara. Artikel ini akan membincangkan sama ada adalah mungkin untuk menggunakan JavaScript untuk mendapatkan semua elemen yang melaluinya gelembung acara dan memperkenalkan beberapa pilihan pelaksanaan.

1 Konsep acara menggelegak

Dalam JavaScript, acara menggelegak bermaksud bahawa apabila acara pada elemen dicetuskan, ia akan menggelegak ke elemen induk, dan kemudian naik semula Bubble ke dalam elemen nenek moyang peringkat lebih tinggi sehingga anda mencapai objek dokumen. Sebagai contoh, dalam kod HTML berikut, apabila pengguna mengklik pada teg 'span', acara klik mula-mula dicetuskan pada elemen span, kemudian disebarkan ke elemen moyangnya p, dan akhirnya ke dokumen objek dokumen:

<p>
  <span>hello, world!</span>
</p>

Proses penyebaran acara selesai secara automatik Jika kami tidak melarang penyebaran peristiwa secara eksplisit, acara akan menggelembung di sepanjang pokok DOM. Semasa acara menggelegak, walaupun acara hanya mempunyai pengendali yang terikat pada elemen yang pada mulanya dicetuskan, ia akan disebarkan kepada semua elemen nenek moyang, jadi elemen dalam keseluruhan pokok DOM boleh diproses.

2. Bolehkah kita mendapatkan semua elemen yang dilalui oleh acara

Dalam JavaScript, kita boleh mengakses maklumat acara yang berkaitan dengan mendapatkan objek acara, termasuk jenis acara, elemen sasaran dan fungsi Pemprosesan semasa, dsb. Walau bagaimanapun, mendapatkan semua elemen yang acara gelembung melalui bukan perkara remeh. Dalam API JavaScript standard, tiada kaedah yang boleh mendapatkan secara langsung semua elemen yang melaluinya gelembung acara.

Penyelesaian biasa ialah dengan melintasi pepohon DOM secara manual, mencari semua elemen di sepanjang laluan tempat acara itu berbuih. Khususnya, kita boleh menggunakan gelung dalam fungsi pengendali acara untuk mengakses secara beransur-ansur elemen induk dan elemen nenek moyang elemen sasaran acara ke atas untuk membina laluan menggelegak acara sehingga nod akar dicapai. Pada setiap nod, kita boleh merekodkan sifat atau maklumat nod untuk pemprosesan atau penyahpepijatan berikutnya. Contohnya, dalam kod berikut, kita boleh menggunakan gelung untuk mengakses elemen sasaran acara dan semua elemen nenek moyangnya dan menyimpan nama tegnya dalam tatasusunan:

function handleClick(event) {
  let target = event.target;
  let path = [];
  while (target) {
    path.push(target.tagName);
    target = target.parentNode;
  }
  console.log(path);
}

Kod keluaran Hasilnya kelihatan serupa dengan yang berikut:

["SPAN", "P", "BODY", "HTML", "DOCUMENT"]

Kaedah merentasi pokok DOM ini berfungsi dengan baik dengan laluan acara itu berbuih, tetapi ia memerlukan merentasi keseluruhan pokok DOM dan mungkin melibatkan banyak pengiraan. Oleh itu, anda perlu berhati-hati semasa menulis kod JavaScript untuk mengelakkan mengurangkan prestasi dan kecekapan.

3. Penyelesaian pelaksanaan lain

Walaupun API JavaScript standard tidak menyediakan kaedah untuk mendapatkan secara langsung semua elemen yang melaluinya gelembung acara, sesetengah perpustakaan sambungan atau rangka kerja menyediakan penyelesaian pelaksanaan yang serupa . Sebagai contoh, pustaka jQuery menyediakan kaedah "delegasi objek acara", yang boleh mendapatkan elemen pada laluan menggelegak acara melalui padanan pemilih. Khususnya, kita boleh menggunakan kaedah on() jQuery untuk mengikat fungsi pengendalian acara, dan menggunakan event.target dalam fungsi panggil balik untuk mendapatkan elemen sasaran. Sebagai contoh, dalam kod berikut, kita boleh menanyakan atribut kelas dalam semua elemen nenek moyang elemen sasaran acara untuk mendapatkan semua elemen pada laluan menggelegak acara:

$(document).on('click', 'span', function(event) {
  let $target = $(event.target);
  let path = $target.parents().map(function() {
    return this.className;
  }).get().reverse();
  console.log(path);
});

Output kod ini adalah serupa dengan Mengenai kandungan berikut:

["p", "content", "page"]

Apabila menggunakan kaedah ini, anda perlu memberi perhatian kepada kesan prestasi padanan pemilih dan cara untuk mengelakkan pelbagai pencetus fungsi pengendali acara.

Selain jQuery, beberapa perpustakaan dan rangka kerja JavaScript lain juga menyediakan penyelesaian yang serupa. Sebagai contoh, pengendali acara dalam rangka kerja React boleh menggunakan objek SyntheticEvent untuk mendapatkan semua elemen pada laluan menggelegak acara. Selain itu, beberapa perpustakaan khusus untuk manipulasi DOM, seperti D3.js dan Raphaël, juga menyediakan model acara mereka sendiri untuk akses pantas kepada elemen individu pada laluan menggelegak acara.

4. Kesimpulan

Acara menggelegak ialah konsep penting dalam pengaturcaraan JavaScript, yang boleh membantu pengaturcara mengendalikan pelbagai acara dalam halaman web dan aplikasi interaktif. Dalam pembangunan sebenar, kita mungkin perlu mendapatkan semua elemen yang dihantar pada laluan menggelegak acara untuk pemprosesan atau penyahpepijatan tertentu. Walaupun API JavaScript standard tidak menyediakan kaedah langsung untuk mendapatkan elemen ini, kami boleh mencapainya dengan melintasi pepohon DOM secara manual, menggunakan perpustakaan sambungan atau rangka kerja, dsb. Anda perlu memberi perhatian kepada isu seperti prestasi dan kerumitan kod apabila menggunakan kaedah ini untuk menulis kod JavaScript yang cekap dan boleh diselenggara.

Atas ialah kandungan terperinci Bincangkan sama ada boleh menggunakan JavaScript untuk mendapatkan semua elemen yang dilalui oleh acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!