Gunakan acara menggelegak untuk melaksanakan fungsi interaktif yang kompleks

Cara menggunakan acara menggelegak untuk mencapai kesan interaktif yang kompleks

Peristiwa menggelegak bermakna apabila acara pada elemen dicetuskan, ia akan menggelegak ke elemen induk, kemudian ke elemen datuk nenek sehingga elemen akar dokumen. Ciri ini membolehkan kami mengendalikan elemen DOM dan mengendalikan acara dengan lebih fleksibel apabila menjalankan interaksi yang kompleks. Seterusnya, kami akan memperkenalkan cara menggunakan acara menggelegak untuk mencapai kesan interaktif yang kompleks.

Pertama, kita perlu memahami prinsip acara menggelegak. Apabila peristiwa dicetuskan, pengendali peristiwa unsur pencetus, pengendali peristiwa unsur induk dan unsur punca akan dilaksanakan mengikut turutan. Dalam proses ini, kita boleh membuat pertimbangan bersyarat berdasarkan jenis peristiwa dan elemen sasaran untuk mencapai kesan interaktif yang berbeza.

Senario aplikasi biasa adalah untuk mencapai kesan klik di luar kotak timbul untuk menutup kotak timbul. Kami boleh menambah peristiwa klik pada keseluruhan halaman atau elemen bekas pada halaman dan menentukan sama ada elemen sasaran yang diklik ialah kotak timbul itu sendiri atau elemen kandungan dalam kotak timbul Jika tidak, tutup pop- timbul. atas kotak. Contoh kod adalah seperti berikut:

document.addEventListener('click', function(event) {
  var modal = document.getElementById('modal');
  var modalContent = document.getElementById('modal-content');
  if (event.target !== modal && event.target !== modalContent) {
    modal.style.display = 'none';
  }
});

Dalam kod di atas, kami menentukan sama ada untuk menutup kotak timbul dengan menilai sama ada elemen sasaran acara itu sama dengan elemen kotak timbul atau elemen kandungan dalam pop timbul -kotak atas. Dengan cara ini, tidak kira di mana anda mengklik, selagi ia bukan elemen dalam kotak pop timbul, kesan penutupan kotak pop timbul akan dicetuskan.

Selain menutup kotak pop timbul, kami juga boleh menggunakan acara menggelegak untuk mencapai kesan seperti tab. Katakan kita mempunyai bekas yang mengandungi berbilang pilihan Apabila pilihan diklik, kandungan yang sepadan dipaparkan. Kami boleh menambah acara klik pada elemen bekas dan menentukan sama ada elemen sasaran yang diklik ialah pilihan dalam pengendali acara Jika ya, paparkan kandungan yang sepadan. Contoh kod adalah seperti berikut:

document.getElementById('options-container').addEventListener('click', function(event) {
  if (event.target.classList.contains('option')) {
    var optionId = event.target.getAttribute('data-id');
    var content = document.getElementById('content-' + optionId);
    content.style.display = 'block';
  }
});

Dalam kod di atas, kami menentukan sama ada elemen sasaran yang diklik mempunyai nama kelas bernama "pilihan" untuk menentukan sama ada ia adalah pilihan. Jika ya, kami boleh mendapatkan elemen kandungan yang sepadan dengan pilihan melalui atribut tersuai dan memaparkannya. Dengan cara ini, apabila anda mengklik pada pilihan yang berbeza, kandungan yang sepadan akan dipaparkan.

Menggunakan acara menggelegak untuk mencapai kesan interaktif yang kompleks membantu memudahkan struktur kod dan meningkatkan kebolehselenggaraan kod. Kami boleh mengendalikan elemen DOM dan mengendalikan acara secara fleksibel dengan menilai elemen sasaran dan jenis acara acara, dengan itu mencapai pelbagai kesan interaktif yang kompleks. Saya harap artikel ini membantu anda memahami dan menggunakan acara menggelegak.

Atas ialah kandungan terperinci Gunakan acara menggelegak untuk melaksanakan fungsi interaktif yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!