Bagaimana Mengendalikan Peristiwa untuk Elemen Ditambah Secara Dinamik dalam JavaScript?

Mengendalikan Acara untuk Elemen Ditambah Secara Dinamik dalam JavaScript

Apabila mencipta elemen dalam JavaScript secara dinamik, adalah penting untuk memahami cara pengendalian acara berfungsi. Secara lalai, penambahan pendengar acara sebelum unsur wujud tidak akan mencetuskan sebarang acara kerana DOM belum dikemas kini.

Untuk mengatasi isu ini, gunakan perwakilan acara. Pendekatan ini melibatkan melampirkan pendengar acara kepada elemen induk yang merangkumi elemen dinamik sedia ada dan akan datang. Apabila peristiwa berlaku, kod JavaScript menyemak sama ada sasaran acara sepadan dengan pemilih elemen dinamik.

Dalam kod contoh yang disediakan, senarai dan butang dibuat secara dinamik:

var html = '<ul>';
for (i = 0; i < 5; i++) {
    html = html + '<li>' + name + i + '</li>';
}
html = html + '</ul>';

html = html + '<input type="button" value="prepend">

Untuk mengendalikan acara klik untuk butang "prepend" yang dibuat secara dinamik, gunakan perwakilan acara:

document.addEventListener('click', function (e) {
  const target = e.target.closest('#btnPrepend'); // Or any other selector.

  if (target) {
    // Do something with `target`.
  }
});

Di sini, acara delegasi digunakan untuk melampirkan pendengar acara klik pada dokumen. Apabila klik berlaku, ia menyemak sama ada elemen sasaran atau mana-mana nenek moyangnya sepadan dengan pemilih #btnPrepend. Jika ya, pengendali acara dilaksanakan.

Delegasi acara memastikan acara dikendalikan walaupun elemen dinamik ditambah selepas pendengar acara dilampirkan. Ia memudahkan pengendalian acara untuk kandungan yang dicipta secara dinamik.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Peristiwa untuk Elemen Ditambah Secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!