Ketahui prinsip menggelegak acara klik dan cara menggunakannya dalam pembangunan web

Fahami prinsip menggelegak acara klik dan aplikasinya dalam pembangunan web

Dalam pembangunan web, interaksi dengan pengguna sering terlibat. Antaranya, acara merupakan salah satu mekanisme penting untuk mencapai kesan interaktif ini. Antara acara ini, acara klik ialah acara yang paling banyak digunakan. Belajar untuk memahami prinsip menggelegak acara klik dan aplikasinya dalam pembangunan web boleh memahami mekanisme acara dengan lebih baik dan mencapai pengalaman interaksi pengguna yang lebih kaya. . elemen kanak-kanak satu demi satu Tahap menggelegak ke elemen induk paling atas. Proses ini dipanggil acara menggelegak.

Sebagai contoh, terdapat halaman web dengan struktur HTML berikut:

<div id="box">
  <button id="btn">点击</button>
</div>

Andaikan pendengar acara klik terikat pada butang ini:

document.getElementById("btn").addEventListener("click", function(){
  console.log("按钮被点击了");
});

Apabila butang diklik, konsol akan mengeluarkan "Butang telah diklik". Ini kerana peristiwa klik butang mencetuskan pendengar.

Jika kita mengikat pendengar acara daripada jenis yang sama kepada div elemen induk:

document.getElementById("box").addEventListener("click", function(){
  console.log("div被点击了");
});

Dengan cara ini, apabila butang diklik, bukan sahaja "butang diklik" dikeluarkan, tetapi "div diklik" juga dikeluarkan . Ini kerana selepas peristiwa klik dicetuskan pada butang, ia akan terus menggelembung ke div elemen induk. . Ini boleh mengurangkan jumlah kod dan memudahkan penyelenggaraan dan pengembangan.

Sebagai contoh, katakan terdapat senarai ul dengan berbilang elemen li di dalamnya. Untuk mencapai apabila elemen li diklik, warna latar belakangnya ditukar. Kita boleh menulis kod seperti ini:

<ul id="list">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

var lis = document.getElementById("list").getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
  lis[i].addEventListener("click", function(){
    this.style.backgroundColor = "red";
  });
}

Walau bagaimanapun, jika kita perlu menambah elemen li baharu kemudian, kita perlu mengekalkannya semula dalam kod JavaScript. Dan jika kita menggunakan acara menggelegak, kita hanya perlu mengikat pendengar acara kepada elemen ul:

document.getElementById("list").addEventListener("click", function(e){
  if(e.target.tagName.toLowerCase() === "li"){
    e.target.style.backgroundColor = "red";
  }
});

Tidak kira berapa banyak elemen li yang ada, kita hanya memerlukan seorang pendengar, dan kita boleh menggunakan mekanisme menggelegak acara untuk menetapkannya elemen induk Tangkap acara dan kemudian tentukan elemen anak yang telah diklik berdasarkan sumber acara.

1. Melaksanakan delegasi acara

Dengan menggunakan bubbling acara, kita boleh melaksanakan fungsi delegasi acara. Delegasi acara merujuk kepada menyerahkan acara elemen kepada elemen induknya atau elemen peringkat lebih tinggi untuk diproses. Ini mengurangkan bilangan pendengar dan memudahkan pengikatan dinamik.

Sebagai contoh, katakan kita mempunyai jadual dan apabila tetikus dilegar di atas sel, warna latar belakang sel itu berubah. Kita boleh menulis kod seperti ini:

<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

var tds = document.getElementById("table").getElementsByTagName("td");
for(var i=0; i<tds.length; i++){
  tds[i].addEventListener("mouseover", function(){
    this.style.backgroundColor = "yellow";
  });
  tds[i].addEventListener("mouseout", function(){
    this.style.backgroundColor = "white";
  });
}

Walau bagaimanapun, jika kita perlu menambah sel baru kemudian, kita perlu mengekalkannya semula dalam kod JavaScript. Dan jika kita menggunakan acara menggelegak, kita hanya perlu mengikat pendengar acara pada elemen jadual:

document.getElementById("table").addEventListener("mouseover", function(e){
  if(e.target.tagName.toLowerCase() === "td"){
    e.target.style.backgroundColor = "yellow";
  }
});
document.getElementById("table").addEventListener("mouseout", function(e){
  if(e.target.tagName.toLowerCase() === "td"){
    e.target.style.backgroundColor = "white";
  }
});

Dengan menilai sumber acara, kita boleh mengelak daripada mengikat pendengar pada setiap sel. Ini mengurangkan bilangan pendengar dan memudahkan pengikatan dinamik.

Ringkasnya, memahami prinsip menggelegak acara klik dan aplikasinya dalam pembangunan web boleh meningkatkan kebolehselenggaraan dan kebolehskalaan kod, sambil merealisasikan fungsi delegasi acara. Pada masa yang sama, acara menggelegak juga boleh mengawal dan mengendalikan interaksi pengguna dengan lebih baik. Dalam pembangunan web sebenar, pemahaman yang mendalam dan penggunaan fleksibel mekanisme menggelegak acara klik akan meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Atas ialah kandungan terperinci Ketahui prinsip menggelegak acara klik dan cara menggunakannya dalam pembangunan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!