Pourquoi certains événements n'ont-ils pas de mécanisme de bouillonnement ?

Pourquoi certains événements ne peuvent-ils pas bouillonner ?

En JavaScript, le bouillonnement d'événements est un mécanisme de traitement d'événements courant. Cela signifie que lorsqu'un élément déclenche un événement, l'événement sera transmis à son élément parent, puis remontera aux éléments ancêtres à leur tour jusqu'à l'élément racine du document. est atteint. Cependant, certains événements ne peuvent pas surgir, c'est-à-dire qu'ils ne peuvent pas être ignorés selon le flux normal des événements. Cet article explique pourquoi cela se produit et fournit quelques exemples de code concrets.

1. La définition et les raisons des événements sans bulles

1. Définition

Les événements sans bulles (non-bulles) font référence à des types d'événements spécifiques. Lorsque ces événements sont déclenchés, les événements ne se produisent que sur les éléments où ils sont. se produisent et ne sont pas transmis aux éléments supérieurs.

2. Cause

Les raisons pour lesquelles les événements ne peuvent pas bouillonner sont généralement les suivantes :

(1) Type d'événement : certains types d'événements eux-mêmes n'ont pas de fonction de bouillonnement, comme la mise au point, le flou, le chargement, le déchargement et d'autres événements. .

(2) Paramétrage de l'attribut : définir l'attribut sur false via la fonction de traitement d'événement peut empêcher l'événement de bouillonner.

(3) Méthodes spéciales : certaines méthodes spéciales de gestion des événements, telles que stopPropagation() et stopImmediatePropagation(), peuvent empêcher les événements de se propager.

2. Exemples d'événements qui ne peuvent pas bouillonner

Voici quelques exemples de plusieurs événements courants qui ne peuvent pas bouillonner, expliquant spécifiquement leurs raisons et comment les utiliser :

1. concentrer et flouter les événements :

concentrer et flouter sont des entrées d'événements Focus pour les éléments, elles ne bouillonnent pas. En effet, lorsque l'utilisateur tape dans la zone de texte, il est plus logique de n'avoir un effet que sur l'élément actuellement ciblé.

<input type="text" id="myInput">
<button id="myButton">Click me!</button>
<script>
document.getElementById('myInput').addEventListener('focus', function() {
  console.log('Input element focused');
});
document.getElementById('myButton').addEventListener('focus', function() {
  console.log('Button element focused');
});
</script>

Résultat de sortie : élément d'entrée concentré

2. Événements de chargement et de déchargement :

L'événement de chargement est déclenché après le chargement de la page ou d'un élément, et l'événement de déchargement est déclenché lorsque la page ou un élément est déchargé. Ils ne bouillonnent pas non plus car ces événements ne concernent que l'élément en cours de chargement ou de déchargement.

<div id="myDiv"></div>
<script>
document.getElementById('myDiv').addEventListener('load', function() {
  console.log('Div element loaded');
});
</script>

Résultat de sortie : élément Div chargé

3. Méthode stopPropagation :

La méthode stopPropagation() est utilisée pour empêcher la propagation d'événements. Après avoir utilisé cette méthode, l'événement ne sera plus transmis à l'élément supérieur.

<div id="parent">
  <div id="child">
    <button id="myButton">Click me!</button>
  </div>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked');
});
document.getElementById('child').addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('Child clicked');
});
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked');
});
</script>

Résultat de sortie : enfant cliqué

Comme vous pouvez le voir dans l'exemple ci-dessus, lorsqu'un bouton d'élément enfant est cliqué, l'événement n'est déclenché que sur l'élément enfant et ne remontera pas jusqu'à l'élément parent comme d'habitude.

3. Résumé et Outlook

Cet article explore les raisons pour lesquelles certains événements ne peuvent pas apparaître et fournit des exemples de code spécifiques. En comprenant les caractéristiques et les causes de ces événements, nous pouvons mieux les gérer et les utiliser de manière flexible dans le développement réel. Nous espérons que grâce à l'introduction de cet article, les lecteurs pourront avoir une compréhension plus approfondie du mécanisme de bouillonnement d'événements et être capables de l'utiliser de manière flexible dans la pratique.

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!