Pas de prise en charge des événements bouillonnants : limites et portée

Bubbling Event fait référence à une méthode de diffusion d'événement qui est déclenchée étape par étape des éléments enfants aux éléments parents dans l'arborescence DOM. Dans la plupart des cas, les événements bouillonnants sont très flexibles et évolutifs, mais il existe des cas particuliers dans lesquels les événements ne prennent pas en charge le bouillonnement.

1. Quels événements ne prennent pas en charge le bouillonnement ?
Bien que la plupart des événements prennent en charge le bouillonnement, certains événements ne le prennent pas en charge. Voici quelques événements courants qui ne prennent pas en charge le bouillonnement :

1. événements de mise au point et de flou
2. événements de chargement et de déchargement
3. saisie, sélection et modification d'événements
4. soumission et réinitialisation d'événements
5. événements de défilement
6. événements mouseenter et mouseleave
7. événement de menu contextuel

2. Exemples d'événements
Afin de mieux comprendre les limites des événements bouillonnants, des exemples de code spécifiques sont donnés ci-dessous pour chaque événement qui ne prend pas en charge le bouillonnement pour une meilleure compréhension :

1. événements focus et flou
   focus et les événements de flou sont des événements utilisés pour gérer les éléments qui gagnent ou perdent le focus. Ces événements ne prennent pas en charge le bullage, ce qui signifie que lorsque vous déclenchez un événement focus ou blur sur un élément enfant, l'événement correspondant sur l'élément parent ne sera pas déclenché.

Code HTML :

<div>
  <input type="text" id="myInput">
</div>

Code JavaScript :

const myInput = document.getElementById('myInput');
myInput.addEventListener('focus', function() {
  console.log('Input获得焦点');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('focus', function() {
  console.log('Div获得焦点');
});

Résultat :
Lorsque la zone de texte obtient le focus, seul « L'entrée obtient le focus » sera affiché dans la console, mais « Div obtient le focus » ne sera pas affiché. Parce que l’événement focus ne remonte pas jusqu’à l’élément parent div.

2. Événements de chargement et de déchargement
   Les événements de chargement et de déchargement sont des événements qui sont déclenchés après le chargement de la page ou de la ressource. Ces événements ne prennent pas en charge le bullage, ce qui signifie que lorsqu'un événement de chargement ou de déchargement est déclenché sur un élément enfant, l'événement correspondant sur l'élément parent ne sera pas déclenché.

Code HTML :

<div>
  <img  src="/static/imghw/default1.png"  data-src="image.png"  class="lazy" id="myImage" alt="Pas de prise en charge des événements bouillonnants : limites et portée" >
</div>

Code JavaScript :

const myImage = document.getElementById('myImage');
myImage.addEventListener('load', function() {
  console.log('图片加载完成');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('load', function() {
  console.log('Div加载完成');
});

Résultat :
Lorsque le chargement de l'image est terminé, seul "Chargement de l'image terminé" sera affiché dans la console et "Chargement Div terminé" ne sera pas affiché. Parce que l'événement de chargement ne remonte pas jusqu'à l'élément parent div.

3. Événements de saisie, de sélection et de modification
   Les événements de saisie, de sélection et de modification sont des événements utilisés pour gérer les modifications de la valeur des éléments du formulaire. Ces événements n'affectent que l'élément dont la valeur a réellement changé et ne remonteront pas jusqu'à l'élément parent.

Code HTML :

<input type="text" id="myInput">

Code JavaScript :

const myInput = document.getElementById('myInput');
myInput.addEventListener('input', function() {
  console.log('输入框值改变');
});
const myForm = document.querySelector('form');
myForm.addEventListener('input', function() {
  console.log('表单值改变');
});

Résultat :
Lorsque la valeur de la zone de saisie change, seule la "Valeur de la zone de saisie modifiée" sera affichée sur la console, mais la "Valeur du formulaire modifiée" ne le sera pas. sortir. Parce que l'événement d'entrée ne remonte pas jusqu'au formulaire de l'élément parent.

4. événements de soumission et de réinitialisation
   les événements de soumission et de réinitialisation sont des événements qui sont déclenchés lorsqu'un formulaire est soumis et réinitialisé. Ces événements ne peuvent être appliqués qu'à l'élément de formulaire lui-même et ne seront pas transmis aux éléments parents.

Code HTML :

<form id="myForm">
  <input type="submit" value="提交">
</form>

Code JavaScript :

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('表单已提交');
});
const myDiv = document.querySelector('div');
myDiv.addEventListener('submit', function() {
  console.log('Div提交');
});

Résultat :
Lorsque vous cliquez sur le bouton de soumission, seul "Formulaire soumis" sera affiché dans la console, mais "Div soumis" ne sera pas affiché. Parce que l’événement submit ne remonte pas jusqu’à l’élément parent div. Notez que dans l'exemple, nous empêchons le comportement de soumission par défaut du formulaire via la méthode event.preventDefault().

5. événement de défilement
   l'événement de défilement est un événement qui est déclenché lors du défilement. Cet événement ne prend pas en charge le bullage, ce qui signifie que lors du défilement d'un élément, l'événement scroll sur l'élément parent ne sera pas déclenché.

Code HTML :

<div style="height: 100px; width: 100px; overflow: auto;">
  <p>这是一段很长的文本</p>
</div>

Code JavaScript :

const myDiv = document.querySelector('div');
myDiv.addEventListener('scroll', function() {
  console.log('滚动');
});

Résultat :
Lorsque le div défile, "scroll" ne sera affiché que dans la console et ne bouillonnera pas vers l'élément supérieur.

6. Événementsmouseenter et mouseleave
   Les événementsmouseenter et mouseleave sont des événements qui sont déclenchés lorsque la souris entre et quitte un élément. Ces événements ne prennent pas en charge le bullage, ce qui signifie que lorsque la souris entre ou quitte un élément, l'événement correspondant sur l'élément parent ne sera pas déclenché.

Code HTML :

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;">
  <p>鼠标进入这个div</p>
</div>

Code JavaScript :

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', function() {
  console.log('鼠标进入div');
});
const myBody = document.querySelector('body');
myBody.addEventListener('mouseenter', function() {
  console.log('鼠标进入body');
});

Résultat :
Lorsque la souris entre dans le div, seul "la souris entre dans le div" sera affiché dans la console, mais "la souris entre dans le corps" ne sera pas affiché.

7. événement de menu contextuel
   l'événement de menu contextuel est un événement déclenché lorsque le bouton droit de la souris est cliqué. Cet événement ne prend pas en charge le bouillonnement, ce qui signifie que lorsque vous cliquez avec le bouton droit sur un élément, l'événement de menu contextuel sur l'élément parent ne sera pas déclenché.

Code HTML :

<div id="myDiv" style="background-color: yellow; width: 100px; height: 100px;"></div>

Code JavaScript :

const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键点击');
});
const myBody = document.querySelector('body');
myBody.addEventListener('contextmenu', function() {
  console.log('右键点击body');
});

Résultat :
Lorsque vous faites un clic droit sur le div, seul le "clic droit" sera affiché dans la console, mais le "clic droit sur le corps" sera affiché ne sera pas émis. Notez que dans l'exemple, nous empêchons l'affichage du menu contextuel par défaut via la méthode event.preventDefault().

3.Résumé
Les événements de bulle sont une méthode de transmission d'événements qui déclenche des événements étape par étape des éléments enfants aux éléments parents dans l'arborescence DOM. La plupart des événements prennent en charge le bouillonnement, mais certains événements spéciaux ne le prennent pas en charge. Cet article analyse les événements qui ne prennent pas en charge le bouillonnement à travers des exemples de code spécifiques, dans l'espoir d'aider les lecteurs à comprendre les limites des événements de bouillonnement.

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!