Terminologie
De quirksmode.org :
Capture d'événement
Lorsque vous utilisez la capture d'événements
| |
--------------- | | -----------------
| element1 | | |
| ----------- | | ----------- |
| | element2 \ / | |
| ------------------------- |
| Événement CAPTURING |
-----------------------------------
le gestionnaire d'événements de element1 se déclenche en premier, le gestionnaire d'événements de element2 se déclenche en dernier.
Bulle d'événement
Lorsque vous utilisez le bouillonnement d'événements
/ \
--------------- | | -----------------
| element1 | | |
| ----------- | | ----------- |
| | element2 | | | |
| ------------------------- |
| Événement BUBBLING |
-----------------------------------
le gestionnaire d'événements de element2 se déclenche en premier, le gestionnaire d'événements de element1 se déclenche en dernier.
Tout événement se déroulant dans le modèle d'événement W3C est d'abord capturé jusqu'à ce qu'il atteigne l'élément cible, puis bouillonne à nouveau .
| | / \
----------------- | | - | | -----------------
| element1 | | | | |
| ------------- | | - | | ----------- |
| | element2 \ / | | | |
| -------------------------------- |
| Modèle d'événement W3C |
------------------------------------------
Interface
Depuis w3.org , pour la capture d'événements :
Si la capture EventListener
souhaite empêcher la poursuite du traitement de l'événement, elle peut appeler la stopPropagation
méthode de l'
Event
interface. Cela empêchera la poursuite de l'envoi de l'événement, bien que d'autres personnes EventListeners
enregistrées au même niveau de hiérarchie recevront toujours l'événement. Une fois la stopPropagation
méthode d' un événement appelée, les appels ultérieurs à cette méthode n'ont aucun effet supplémentaire. Si aucun capturer supplémentaire n'existe et
stopPropagation
n'a pas été appelé, l'événement déclenche le approprié EventListeners
sur la cible elle-même.
Pour le bouillonnement d'événement :
Tout gestionnaire d'événements peut choisir d'empêcher la propagation d'événements supplémentaires en appelant la stopPropagation
méthode de l' Event
interface. Si quelqu'un
EventListener
appelle cette méthode, tous les éléments supplémentaires EventListeners
sur le courant EventTarget
seront déclenchés mais le bouillonnement cessera à ce niveau. Un seul appel à stopPropagation
est requis pour empêcher de nouvelles bulles.
Pour l' annulation de l'événement :
Cancelation est accompli en appelant la Event
de » preventDefault
méthode. Si un ou plusieurs EventListeners
appels au preventDefault
cours d'une phase du flux d'événements, l'action par défaut sera annulée.
Exemples
Dans les exemples suivants, un clic sur l'hyperlien dans le navigateur Web déclenche le flux de l'événement (les écouteurs d'événements sont exécutés) et l'action par défaut de la cible de l'événement (un nouvel onglet est ouvert).
HTML:
<div id="a">
<a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>
JavaScript:
var el = document.getElementById("c");
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);
Exemple 1 : il en résulte la sortie
DIV event capture
A event capture
A event bubbling
DIV event bubbling
Exemple 2 : ajout stopPropagation()
à la fonction
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.stopPropagation();
}
entraîne la sortie
DIV event capture
L'écouteur d'événement a empêché toute propagation vers le bas et vers le haut de l'événement. Cependant, cela n'a pas empêché l'action par défaut (une nouvelle ouverture d'onglet).
Exemple 3 : ajout stopPropagation()
à la fonction
function capturingOnClick2(ev) {
el.innerHTML += "A event capture<br>";
ev.stopPropagation();
}
ou la fonction
function bubblingOnClick2(ev) {
el.innerHTML += "A event bubbling<br>";
ev.stopPropagation();
}
entraîne la sortie
DIV event capture
A event capture
A event bubbling
En effet, les deux écouteurs d'événements sont enregistrés sur la même cible d'événement. Les écouteurs d'événement ont empêché la propagation vers le haut de l'événement. Cependant, ils n'ont pas empêché l'action par défaut (une nouvelle ouverture d'onglet).
Exemple 4 : ajout preventDefault()
à n'importe quelle fonction, par exemple
function capturingOnClick1(ev) {
el.innerHTML += "DIV event capture<br>";
ev.preventDefault();
}
empêche l'ouverture d'un nouvel onglet.
event.stop
fonction ... Aussi bizarre que je ne l' ai jamais eu du mal avec ça. J'utilise beaucoup le bouillonnement. Merci pour l'exemple!