Rumah > hujung hadapan web > tutorial js > Bagaimana Mengendalikan Pendengar Acara untuk Elemen Dicipta Secara Dinamik Tanpa jQuery?

Bagaimana Mengendalikan Pendengar Acara untuk Elemen Dicipta Secara Dinamik Tanpa jQuery?

Linda Hamilton
Lepaskan: 2024-10-22 12:08:02
asal
656 orang telah melayarinya

How to Handle Event Listeners for Dynamically Created Elements Without jQuery?

Pendengar Acara untuk Elemen Dicipta Secara Dinamik

Untuk menambah pendengar acara kepada elemen yang dijana secara dinamik tanpa jQuery, anda boleh menggunakan delegasi acara. Begini caranya:

Gunakan Perwakilan Acara
Sifat sasaran objek acara membolehkan anda mengenal pasti elemen mana peristiwa itu berlaku. Menggunakan ini, anda boleh mengikat pendengar acara kepada elemen induk dan menyemak elemen sasaran untuk bertindak balas terhadap kriteria tertentu. Contohnya:

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});</code>
Salin selepas log masuk

Dalam contoh ini, pendengar acara terikat pada badan dan apabila klik berlaku pada mana-mana elemen kanak-kanak, kod itu menyemak sama ada ia adalah 'li'. Jika ya, tindakan yang ditentukan dilakukan.

Kaveat
Perhatikan bahawa pendekatan ini berfungsi dengan baik dengan penyemak imbas moden yang menyokong mekanisme perwakilan acara. Untuk versi IE yang lebih lama, anda mungkin perlu melaksanakan pengendali acara tersuai menggunakan attachEvent.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Pendengar Acara untuk Elemen Dicipta Secara Dinamik Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan