Bagaimanakah Anda Boleh Mendengar Acara pada Elemen Dicipta Secara Dinamik Tanpa Menggunakan jQuery?

Cara Menambah Pendengar Acara pada Elemen Dicipta Secara Dinamik

Apabila bekerja pada halaman web yang menggabungkan kandungan dinamik, mungkin perlu menambah pendengar acara kepada elemen yang tidak hadir pada halaman pada mulanya. Panduan ini menggariskan kaedah untuk mencapai ini tanpa bergantung pada jQuery.

Pendekatan asal melibatkan penggunaan doc.body.addEventListener('klik') untuk mengendalikan acara bagi elemen sedia ada pada pemuatan halaman. Walau bagaimanapun, untuk elemen yang dijana secara dinamik, penyelesaian yang lebih mantap diperlukan.

Delegasi dan Penyebaran Acara

Kunci untuk menambah pendengar acara secara dinamik ialah perwakilan acara. Dengan pendekatan ini, anda boleh melampirkan pendengar acara tunggal pada elemen induk (cth., badan) dan kemudian semak sasaran acara untuk menentukan elemen khusus yang telah diklik.

Kod Contoh

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

Dalam contoh ini, pendengar acara dilampirkan pada badan. Apabila elemen dalam badan diklik, sasaran acara diperiksa. Jika sasaran ialah elemen li, tindakan yang diingini dilakukan.

Kaveat

Perhatikan bahawa kod yang disediakan serasi dengan penyemak imbas moden. Untuk keserasian penyemak imbas dengan versi Internet Explorer yang lebih lama, pembalut tersuai di sekeliling fungsi acara asli mungkin diperlukan.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mendengar Acara pada Elemen Dicipta Secara Dinamik Tanpa Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!