Comment empêcher les événements de se propager en javascript

Le bouillonnement d'événements en JavaScript est un mécanisme courant de propagation d'événements. Cela signifie que lorsqu'un événement sur un élément est déclenché, il se propage vers le haut (nœud parent) jusqu'à ce qu'il atteigne le nœud racine du document. puis se propage vers l'extérieur, c'est ce qu'on appelle le bouillonnement d'événement. L'implémentation du mécanisme de diffusion d'événements présente de nombreux avantages. Par exemple, des gestionnaires d'événements peuvent être ajoutés à l'élément parent au lieu de chaque élément enfant, réduisant ainsi la redondance du code et améliorant la maintenabilité et la réutilisation du code. Cependant, dans certains cas, nous devrons peut-être empêcher les événements d’éléments de se propager pour éviter d’affecter d’autres éléments. Cet article présentera des moyens d'empêcher les événements de se propager en JavaScript.

1. Capture d'événements et bouillonnement d'événements

Avant de discuter en profondeur du bouillonnement d'événements, nous devons comprendre les deux étapes différentes de la propagation d'un événement : la capture d'événements et le bouillonnement d'événements. La capture d'événements se propage vers le bas depuis le nœud racine du document vers l'élément cible, tandis que la diffusion d'événements se propage vers le haut depuis l'élément cible vers le nœud racine du document. Dans le modèle d'événement DOM, les événements sont d'abord soumis à l'élément le plus externe de l'élément cible, puis propagés vers l'intérieur jusqu'à ce qu'un événement sur l'élément cible soit déclenché, puis l'événement est propagé vers l'extérieur depuis l'élément cible, jusqu'à l'élément cible. document.

2. Méthodes pour empêcher la propagation d'événements

En JavaScript, nous pouvons utiliser les méthodes PreventDefault() et stopPropagation() pour empêcher la propagation des événements. La méthode Event.preventDefault() est utilisée pour empêcher le comportement par défaut de l'événement, comme empêcher le passage à une nouvelle page lorsqu'un lien est cliqué. La méthode stopPropagation() est utilisée pour empêcher la propagation des événements, empêchant ainsi la propagation ou la capture d'événements. Il peut être appelé dans un gestionnaire d'événements pour arrêter la propagation du bouillonnement d'événements ou la capture d'événements.

1. Utilisez la méthode event.stopPropagation()

Cette méthode peut empêcher la propagation ultérieure d'un événement et empêcher tout élément parent de capturer les événements d'autres éléments. Lorsqu'un événement est déclenché, il cesse de se propager et les autres gestionnaires d'événements ne sont pas appelés.

L'exemple de code est le suivant :

document.querySelector('#child').addEventListener('click', function(event) {
  console.log('child clicked');
  event.stopPropagation();
})

document.querySelector('#parent').addEventListener('click', function(event) {
  console.log('parent clicked');
})

Dans cet exemple, lorsqu'un élément enfant est cliqué, les événements cessent d'être délivrés et le gestionnaire d'événements de l'élément parent n'est pas déclenché.

2. Utilisez la méthode event.preventDefault()

Cette méthode empêche uniquement le comportement par défaut de l'événement, mais n'empêche pas l'événement de bouillonner. L'exemple de code est le suivant :

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

Dans cet exemple, lorsque l'on clique sur le lien, le gestionnaire d'événements imprime un message et empêche de passer à une nouvelle page. Cependant, il sera toujours transmis au gestionnaire d'événements de l'élément parent (l'élément div).

3. Prévenir le comportement par défaut et le comportement par défaut

Parfois, nous devons empêcher en même temps le comportement par défaut et le processus de bouillonnement d'un événement. Dans ce cas, nous pouvons appeler les méthodes PreventDefault() et stopPropagation().

L'exemple de code est le suivant :

document.querySelector('a').addEventListener('click', function(event) {
  console.log('link clicked');
  event.preventDefault();
  event.stopPropagation();
})

document.querySelector('div').addEventListener('click', function(event) {
  console.log('div clicked');
})

Dans cet exemple, lorsque le lien est cliqué, le gestionnaire d'événements appelle les méthodes PreventDefault() et stopPropagation(), arrêtant ainsi le comportement par défaut de l'événement et l'empêchant de bouillonner. . Par conséquent, le gestionnaire d’événements de l’élément div n’est pas appelé.

3. Résumé

Dans cet article, nous avons présenté la méthode permettant d'empêcher la propagation d'événements en JavaScript, c'est-à-dire en utilisant les méthodes stopPropagation() et PreventDefault(). Nous avons également abordé la différence entre le bouillonnement d'événements et la capture d'événements. Lorsque nous devons empêcher l'événement de bouillonner, nous pouvons utiliser la méthode stopPropagation(), et lorsque nous devons empêcher le comportement par défaut de l'événement, nous pouvons utiliser la méthode PreventDefault(). Dans certains cas, nous devrons peut-être utiliser les deux pour éviter la propagation d'événements et le comportement par défaut en fonction de nos besoins.

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!