Apakah peristiwa yang tidak boleh disampaikan dengan menggelegak?

Apakah peristiwa yang tidak boleh dibuih?

Acara menggelegak bermakna apabila elemen mencetuskan acara pada halaman web, jika elemen induknya turut mempunyai pendengar untuk acara tersebut, maka peristiwa itu juga akan dicetuskan pada elemen induk. Acara menggelegak adalah sangat biasa dalam pembangunan web. Ia boleh mengurus tindak balas acara berbilang elemen dalam halaman dengan mudah. Walau bagaimanapun, tidak semua acara sesuai untuk penghantaran menggelegak, dan beberapa acara perlu dihalang daripada menggelegak untuk mengelakkan masalah yang tidak perlu. Artikel ini akan memperkenalkan beberapa peristiwa biasa yang tidak boleh dibuih dan memberikan contoh kod tertentu.

1. Fokus dan kaburkan acara

Dalam halaman web, apabila elemen mendapat fokus (fokus) atau hilang fokus (kabur), peristiwa yang sepadan akan dicetuskan. Kedua-dua acara ini tidak boleh dibuihkan dan dihantar kerana acara fokus berkaitan dengan interaksi pengguna pada halaman Jika acara fokus boleh dibuihkan dan dihantar, ia mungkin membawa kepada hasil yang tidak dijangka. Berikut ialah kod sampel:

<div id="outer">
  <input id="inner" type="text">
</div>

<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("focus", function() {
  console.log("outer focus");
});

inner.addEventListener("focus", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner focus");
});

inner.addEventListener("blur", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("inner blur");
});

outer.addEventListener("blur", function() {
  console.log("outer blur");
});
</script>

Dalam kod di atas, apabila kotak input teks dalam memperoleh fokus, peristiwa fokus dalam dicetuskan dan peristiwa itu dihalang daripada menggelegak ke elemen div luar melalui kaedah stopPropagation(), dan Peristiwa fokus luaran tidak akan dicetuskan.

2. acara tatal

acara tatal ialah peristiwa yang dicetuskan apabila halaman ditatal dan tidak boleh dihantar dengan menggelegak. Memandangkan acara tatal berkaitan dengan tatal halaman web, jika acara tatal boleh dihantar dengan menggelegak, ia boleh menyebabkan kekeliruan dalam menatal halaman. Berikut ialah contoh kod:

<div id="container" style="height: 200px; overflow: auto;">
  <div id="content" style="height: 1000px;"></div>
</div>

<script>
var container = document.getElementById("container");
var content = document.getElementById("content");

container.addEventListener("scroll", function() {
  console.log("container scroll");
});

content.addEventListener("scroll", function(event) {
  event.stopPropagation(); // 阻止冒泡传递
  console.log("content scroll");
});
</script>

Dalam kod di atas, apabila kawasan kandungan menatal, acara tatal kawasan kandungan dicetuskan dan peristiwa menggelegak dihalang daripada dihantar ke elemen bekas melalui kaedah stopPropagation(), jadi acara tatal bekas tidak akan dicetuskan.

3. memuat dan memunggah acara

Acara pemuatan dicetuskan selepas halaman atau imej dimuatkan dan acara pemunggahan dicetuskan apabila halaman hampir dipunggah. Kedua-dua acara ini tidak boleh dibuihkan dan dihantar kerana ia berkaitan dengan pemuatan dan pemunggahan keseluruhan halaman Jika ia boleh dibuihkan dan dihantar, ia boleh menyebabkan kekeliruan dalam susunan pemuatan dan pemunggahan halaman. Berikut ialah contoh kod:

window.addEventListener("load", function() {
  console.log("page loaded");
});

window.addEventListener("unload", function() {
  console.log("page unloaded");
});

Dalam kod di atas, peristiwa pemuatan akan dicetuskan apabila halaman dimuatkan dan acara pemunggahan akan dicetuskan apabila halaman hampir dipunggah. Kedua-dua acara ini tidak akan muncul dan disalurkan kepada elemen lain.

Ringkasan

Selain peristiwa yang dinyatakan di atas, terdapat beberapa peristiwa lain yang tidak boleh dibuih, seperti input, tukar, set semula, hantar, masukkan tetikus, mouseleave dan acara lain. Apabila menggunakan acara ini, anda perlu memberi perhatian kepada mekanisme penghantaran acara untuk mengelakkan masalah yang tidak perlu. Memahami prinsip penyampaian acara boleh mengawal dan mengurus respons acara dengan lebih baik dalam halaman web dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Apakah peristiwa yang tidak boleh disampaikan dengan menggelegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!