tutoriel de base JavaScript

objet JavaScript

fonction JavaScript

HTML DOM JS

BOM du navigateur JS

tutoriel de base AJAX

manuel de référence JavaScript

Date JavaScript Écouteur d'événements JavaScript

Propagation des événements JavaScript

La propagation des événements est une méthode pour décrire le "pile" d'événements déclenchés dans un navigateur Web.

événementPropagationetPhase de capturesont deux mécanismes de propagation des événements, ils décrivent ce qui se passe lorsque deux gestionnaires d'événements du même type sont activés sur un élément.

hypothétiquement, vous êtes dans<div >l'élément contient un<p>l'élément, et l'utilisateur a cliqué sur<p>l'élément, vous devriez d'abord traiter l'événement "click" de quel élément ?

Exemple

<div id="div"1">Capturant
　　<p id="p"1">Cliquez-moi<"/p>"
</div>"
<script>
document.querySelector("#div"1).addEventListener("click", myFunc, true);
document.querySelector("#p"}1).addEventListener("click", myFunc, true);
</script>

Testez et voyez‹/›

Parcapture( capture)，l'événement est d'abord capturé par l'élément le plus externe et propagé vers les éléments internes.

ParPropagation，l'événement est d'abord capturé et traité par l'élément le plus interne, puis propagé vers les éléments externes.

Utilisez cetteaddEventListener()Méthode, vous pouvez utiliser " useCapture Le paramètre spécifie le type de propagation, la syntaxe suivante explique en détail useCapture.

Syntaxe :

element.addEventListener(event, listener, useCapture)

La valeur par défaut de "useCapture" est false, ce qui signifie qu'il utilise par défaut la propagation de bulle;而当值设置为true时，事件将使用捕获传播。

Explication de la propagation et de la capture

L'introduction du concept de propagation des événements vise à traiter les cas où plusieurs éléments de la hiérarchie DOM, ayant une relation父子 dans la structure DOM, ont des gestionnaires d'événements pour le même événement (par exemple, un clic de souris). Le problème actuel est de savoir quel élément du clic sera traité en premier, c'est-à-dire l'élément externe ou l'élément interne du clic.

Lorsque l'événement est déclenché sur un élément avec des parents (par exemple, dans cet exemple,<p>), le navigateur exécutera deux phases différentes-Phase de capture et phase de propagation.

DansPhase de capturePhase :

Le navigateur vérifie le parent le plus externe de l'élément (<html>si l'élément a enregistré un gestionnaire d'événement onclick à la phase de capture, dans le cas, exécute le gestionnaire d'événement.
Ensuite, il se déplace versdans <html>de l'élément suivant et exécute la même opération, puis exécute le suivant, et ainsi de suite, jusqu'à atteindre l'élément cliqué réellement.

DansPropagationPhase, à l'inverse :

Le navigateur vérifie si l'élément cliqué réellement pendant la phase de propagation a enregistré un gestionnaire d'événement onclick dessus, et si c'est le cas, exécute le gestionnaire d'événement.
Ensuite, il se déplace vers l'élément parent direct suivant, puis exécute le suivant, et ainsi de suite, jusqu'à atteindre<html>à l'élément cible.

Dans les navigateurs populaires, par défaut, tous les gestionnaires d'événements sont enregistrés à la phase de propagation.

Phase de capture

Au cours de la phase de capture, l'événement se propage de Window vers le bas à travers l'arbre DOM jusqu'au nœud cible.

Exemple

document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);

Testez et voyez‹/›

Seulement lorsqueaddEventListener()Le troisième paramètre est configuré à true, l'interception de l'événement est utilisée avec les gestionnaires d'événements enregistrés à ce moment-là.

Phase de bulle

Dans la phase de bulle, à l'inverse. À ce stade, l'événement se propage ou bulle, de l'élément cible au Window, l'arbre DOM est propagé vers le haut.

Exemple

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);

Testez et voyez‹/›

Tous les navigateurs supportent l'événement de bulle, et l'événement de bulle s'applique à tous les gestionnaires, peu importe leur méthode d'enregistrement (par exemple, onclick ou addEventListener()).

Arrêter la propagation de l'événement

Si vous souhaitez empêcher l'informiation des gestionnaires d'événements des ancêtres à l'aide de la méthode event.stopPropagation(), vous pouvez également arrêter la propagation de l'événement à l'intérieur.

Dans l'exemple suivant, si vous cliquez sur un élément fils, le gestionnaire d'événement click du parent ne sera pas exécuté:

Exemple

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
　　alert("You clicked: ");+　this.tagName);
　　event.stopPropagation();
}

Testez et voyez‹/›

Accéder à l'élément cible

L'élément cible est le nœud DOM généré par l'événement.

Par exemple, si l'utilisateur clique sur un hyperlien, l'élément cible est l'hyperlien.

L'accès à l'élément cible est de event.target, il ne change pas pendant la phase de propagation de l'événement.

Exemple

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
function myFunc() {
　　alert("target = ");　+　event.target.tagName);
}

Testez et voyez‹/›

Empêcher l'action par défaut

Certains événements ont des opérations par défaut associées. Par exemple, si vous cliquez sur un lien, le navigateur vous amène à l'endroit cible du lien, si vous cliquez sur le bouton de soumission du formulaire, le navigateur soumet le formulaire, etc. Vous pouvez utiliser la méthode event.preventDefault() de l'objet événement pour empêcher de telles opérations par défaut.

Exemple

function myFunc() {
　　event.preventDefault();
}

Testez et voyez‹/›

Cependant, empêcher l'opération par défaut ne peut pas empêcher la propagation de l'événement; l'événement continue de se propager normalement jusqu'à l'arbre DOM.

Délégation d'événements

La bulle nous permet également d'utiliser la délégation d'événements.

La délégation d'événements vous permet d'éviter d'ajouter un écouteur d'événement à un noeud spécifique ; au lieu de cela, vous ajoutez un écouteur d'événement à un objet parent.

Ce concept est basé sur le fait que si vous souhaitez exécuter un certain code lors du clic sur l'un des nombreux éléments enfants, vous pouvez configurer un écouteur d'événement sur l'élément parent et permettre à l'événement de remonter à l'élément parent, sans avoir à configurer un écouteur d'événement pour chaque enfant.

Dans cet exemple, si vous souhaitez afficher un message en cliquant, vous pouvez configurer un écouteur d'événement click sur l'élément parent, et permettre à l'événement de remonter à l'élément parent, sans avoir à configurer un écouteur d'événement pour chaque enfant.<ul>Configurez un écouteur d'événement click sur le parent, il affichera l'élément de liste

Exemple

<ul id="parent-list">
<li id="post-1">Item　1</li>
<li id="post-2">Item　2</li>
<li id="post-3">Item　3</li>
<li id="post-4">Item　4</li>
<li id="post-5">Item　5</li>
<li id="post-6">Item　6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
　　if(event.target && event.target.nodeName == "LI") {
　alert("Élément de liste "　+　event.target.id.replace("post-", "")　+　" a été cliqué !");
　　}
});
</script>

Testez et voyez‹/›

Date JavaScript Écouteur d'événements JavaScript