Ketahui cara menggunakan peristiwa menggelegak untuk mencapai kesan interaktif: Contoh analisis peristiwa menggelegak JS

Analisis contoh acara menggelegak JS: Untuk menguasai cara menggunakan acara menggelegak untuk mencapai kesan interaktif, contoh kod khusus diperlukan

Dengan pembangunan Internet, JavaScript (JS) telah menjadi teknologi penting dalam pembangunan bahagian hadapan . Dalam pembangunan bahagian hadapan, acara menggelegak JS sering digunakan untuk mencapai kesan interaktif. Artikel ini akan memperkenalkan konsep asas dan penggunaan peristiwa menggelegak JS melalui contoh kod tertentu dan menganalisis cara menggunakan peristiwa menggelegak untuk mencapai beberapa kesan interaktif biasa.

1. Konsep asas acara menggelegak JS
Dalam dokumen HTML, struktur elemen selalunya merupakan hubungan bersarang. Apabila elemen mencetuskan peristiwa, peristiwa itu menggelembung ke elemen induk sehingga ia mencapai elemen akar dokumen. Ini ialah konsep asas acara menggelegak JS. Peristiwa menggelegak termasuk peristiwa klik biasa, peristiwa bergerak masuk dan keluar tetikus, acara papan kekunci, dsb.

2. Penggunaan khusus acara menggelegak

1. Buat struktur HTML
   Pertama, kita perlu mencipta beberapa elemen HTML dengan perhubungan bersarang untuk menunjukkan proses penyampaian acara menggelegak. Sebagai contoh, cipta bekas div dan tambah beberapa elemen div di dalam bekas Kodnya adalah seperti berikut:

<div id="container">
  <div>元素1</div>
  <div>元素2</div>
  <div>元素3</div>
</div>

2. Tambah kod JS
   Seterusnya, kita perlu menambah beberapa kod JS untuk mengikat pendengar acara kepada elemen ini untuk pemerhatian. proses penyampaian acara yang menggelegak. Kodnya adalah seperti berikut:

var container = document.getElementById('container');
var elements = container.getElementsByTagName('div');

// 为每个元素绑定事件监听器
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function(event){
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
  });
}

// 递归获取所有冒泡元素
function getBubblingElements(event) {
  var bubblingElements = [];
  var currentElement = event.target;
  
  while (currentElement !== document) {
    bubblingElements.push(currentElement.innerHTML);
    currentElement = currentElement.parentNode;
  }
  
  return bubblingElements;
}

Dalam kod, kami mula-mula mendapatkan elemen kontena dan sub-elemennya, kemudian mengikat pendengar acara klik pada setiap sub-elemen. Apabila elemen kanak-kanak diklik, pendengar mencetak kandungan elemen semasa dan semua elemen berbuih.

3. Menguji acara menggelegak
   Akhir sekali, kami boleh menguji proses penyampaian acara menggelegak dengan mengklik pada elemen div. Apabila kita mengklik pada elemen div, konsol akan mengeluarkan kandungan elemen yang sedang diklik dan semua elemen menggelegak. Sebagai contoh, jika elemen 3 diklik, hasil output adalah seperti berikut:

当前元素： 元素3
冒泡元素： [元素3, 元素2, 元素1, #container]

Keputusan di atas menunjukkan bahawa elemen sebenar yang diklik ialah elemen 3, dan proses menggelegak melalui elemen 2, elemen 1 dan elemen bekas (# bekas) mengikut urutan.

3. Gunakan acara menggelegak untuk mencapai kesan interaktif
Selepas menguasai konsep asas dan penggunaan khusus acara menggelegak, kami boleh menggunakan acara menggelegak untuk mencapai beberapa kesan interaktif biasa. Berikut mengambil pembatalan menggelegak, proksi acara dan perwakilan acara sebagai contoh untuk analisis.

1. Batalkan menggelegak
   Kadangkala, kami mahu acara dilaksanakan hanya pada elemen semasa tanpa dihantar kepada elemen induk. Pada masa ini, anda boleh menggunakan kaedah stopPropagation objek acara untuk membatalkan menggelegak acara. Sebagai contoh, kami mengubah suai kod di atas supaya hanya kandungan elemen yang sedang diklik akan dikeluarkan ke konsol:

// 为每个元素绑定事件监听器
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function(event){
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
    event.stopPropagation(); // 取消事件冒泡
  });
}

Dalam kod yang diubah suai, kaedah stopPropagation objek acara ditambahkan boleh membatalkan acara penghantaran. Dengan cara ini, apabila elemen div diklik, hanya elemen semasa dan kandungannya akan dikeluarkan kepada konsol.

2. Proksi Acara
   Apabila terdapat banyak elemen DOM yang perlu diikat pada pendengar acara yang sama, anda boleh menggunakan proksi acara untuk memudahkan kod. Dengan mengikat pendengar acara kepada elemen induk dan menggunakan proses penghantaran acara menggelegak, peristiwa elemen anak ditangkap pada elemen induk. Sebagai contoh, kami mengubah suai kod di atas untuk mengikat pendengar acara kepada elemen kontena:

container.addEventListener('click', function(event){
  if (event.target.tagName === 'DIV') { // 只处理div元素的点击事件
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
  }
});

Dalam kod yang diubah suai, ikat pendengar acara kepada elemen kontena dan menilai acara dalam kod pendengar menentukan sama ada elemen div diklik. Dengan cara ini, tidak kira berapa banyak elemen div yang kami tambahkan pada bekas, kami hanya memerlukan satu pendengar acara.

3. Delegasi acara
   Delegasi acara ialah cara untuk menggunakan acara menggelegak dengan cekap Anda boleh meletakkan jenis pendengar acara tertentu pada elemen induk dan acara proksi pada semua elemen anak jenis itu. Sebagai contoh, kami mengubah suai kod di atas untuk hanya menambah pendengar acara klik untuk elemen kontena dan proksi acara klik semua elemen div:

container.addEventListener('click', function(event){
  if (event.target.tagName === 'DIV') { // 只处理div元素的点击事件
    console.log('当前元素：', event.target.innerHTML);
    console.log('冒泡元素：', getBubblingElements(event));
  }
});

Dalam kod yang diubah suai, hanya pendengar acara klik ditambahkan untuk elemen kontena, dan Kod pendengar menentukan sama ada tagName event.target ialah elemen div. Dengan cara ini, tidak kira berapa banyak elemen div yang kami tambahkan pada bekas, ia akan diproses oleh proksi pendengar acara.

Ringkasan:
Artikel ini memperkenalkan konsep asas dan penggunaan acara menggelegak JS melalui contoh kod tertentu dan menganalisis secara terperinci cara menggunakan peristiwa menggelegak untuk mencapai beberapa kesan interaktif biasa, termasuk membatalkan menggelegak, proksi acara dan perwakilan acara . Menguasai penggunaan acara menggelegak boleh meningkatkan kecekapan kesan interaktif dalam pembangunan bahagian hadapan dan memberikan pengguna web pengalaman pengguna yang lebih baik. Saya harap artikel ini akan membantu pembaca memahami dan menggunakan peristiwa menggelegak JS.

Atas ialah kandungan terperinci Ketahui cara menggunakan peristiwa menggelegak untuk mencapai kesan interaktif: Contoh analisis peristiwa menggelegak JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!