Quels sont les événements qui ne peuvent pas être livrés par bouillonnement ?

Quels événements ne peuvent pas être diffusés ?

Le bouillonnement d'événement signifie que lorsqu'un élément déclenche un événement sur une page Web, si son élément parent a également un écouteur pour l'événement, alors l'événement sera également déclenché sur l'élément parent. La diffusion d'événements est très courante dans le développement Web. Elle peut facilement gérer la réponse aux événements de plusieurs éléments de la page. Cependant, tous les événements ne sont pas adaptés à la diffusion bouillonnante, et certains événements doivent être empêchés de se propager pour éviter des problèmes inutiles. Cet article présentera plusieurs événements courants qui ne peuvent pas être diffusés et fournira des exemples de code spécifiques.

1. Événements de mise au point et de flou

Dans une page Web, lorsqu'un élément gagne le focus (focus) ou perd le focus (flou), l'événement correspondant sera déclenché. Ces deux événements ne peuvent pas être diffusés et diffusés, car l'événement de focus est lié à l'interaction de l'utilisateur sur la page. Si l'événement de focus peut être diffusé et diffusé, cela peut conduire à des résultats inattendus. Voici un exemple de code :

<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>

Dans le code ci-dessus, lorsque la zone de saisie de texte interne obtient le focus, l'événement de focus interne est déclenché et l'événement ne peut pas se propager vers l'élément div externe via la méthode stopPropagation(), et les événements de focus externe ne seront pas déclenchés.

2. événement de défilement

l'événement de défilement est un événement déclenché lorsque la page défile et ne peut pas être délivré par bouillonnement. Étant donné que l'événement de défilement est lié au défilement de la page Web, si l'événement de défilement peut être diffusé et diffusé, cela peut provoquer une confusion dans le défilement de la page. Voici un exemple de code :

<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>

Dans le code ci-dessus, lorsque la zone de contenu défile, l'événement de défilement de la zone de contenu est déclenché et l'événement bouillonnant ne peut pas être transmis à l'élément conteneur via la méthode stopPropagation(), donc l'événement scroll du conteneur ne sera pas déclenché.

3. Événements de chargement et de déchargement

L'événement de chargement est déclenché après le chargement de la page ou de l'image, et l'événement de déchargement est déclenché lorsque la page est sur le point d'être déchargée. Ces deux événements ne peuvent pas être diffusés et livrés car ils sont liés au chargement et au déchargement de la page entière. S'ils peuvent être diffusés et livrés, cela peut entraîner une confusion dans l'ordre de chargement et de déchargement de la page. Voici un exemple de code :

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

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

Dans le code ci-dessus, l'événement de chargement sera déclenché lorsque la page est chargée, et l'événement de déchargement sera déclenché lorsque la page est sur le point d'être déchargée. Ces deux événements ne bouillonneront pas et. être transmis à d'autres éléments.

Résumé

En plus des événements mentionnés ci-dessus, il existe d'autres événements qui ne peuvent pas être diffusés, tels que la saisie, la modification, la réinitialisation, la soumission, la saisie de la souris, le congé de la souris et d'autres événements. Lorsque vous utilisez ces événements, vous devez faire attention au mécanisme de transmission des événements pour éviter des problèmes inutiles. Comprendre les principes de diffusion des événements permet de mieux contrôler et gérer les réponses aux événements dans les pages Web et d'améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!