Explication détaillée des compétences d'événement javascript bubbling

Explication détaillée des compétences d'événement javascript bubbling_javascript

WBOY

Libérer： 2016-05-16 15:20:45

original

1383 Les gens l'ont consulté

Les événements sont l'un des contenus centraux de JavaScript. L'application des événements implique inévitablement un concept important, qui est le bouillonnement d'événements. Avant d'introduire le bouillonnement d'événements, introduisons un autre concept important :
. 1. Qu'est-ce que le flux d'événements :
Le modèle objet de document (DOM) est une structure arborescente, qui peut être représentée de manière vivante par la figure suivante.

Si un élément html déclenche un événement, alors l'événement sera propagé dans un certain ordre entre le nœud déclencheur et le nœud racine dans l'arborescence DOM. Tous les nœuds passants recevront l'événement déclenché. Ce processus de propagation est appelé C'est. un flux d'événements. Selon l'ordre de propagation des événements, ils peuvent être divisés en deux catégories, l'une est le bouillonnement d'événements et l'autre est la capture d'événements, ce qui fait intervenir le sujet qui sera introduit dans ce chapitre :
1. Événement bouillonnant :
Ce qu'on appelle le bouillonnement temporel signifie que lorsqu'un élément déclenche un événement, l'événement sera comme une bulle, se propageant de l'élément déclencheur à tous ses nœuds parents. L'événement sera reçu jusqu'au nœud racine correspondant. L'événement est enregistré dans la fonction de gestionnaire d'élément parent, alors même si l'événement est déclenché sur le nœud enfant, la fonction de gestionnaire d'événements enregistrée sur l'élément parent sera également déclenchée. Par exemple, dans l'illustration ci-dessus, si l'événement onclick de l'élément a est déclenché, alors ses éléments parents p, document et window recevront tous cet événement, et si une fonction de traitement du temps est enregistrée sur l'élément parent correspondant, alors cette fonction de traitement d'événements s'exécutera, regardez un exemple de code :

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

Copier après la connexion

Le but du code ci-dessus est de faire apparaître le contenu dans la cellule correspondante lorsque l'on clique sur la cellule correspondante. Cependant, dans l'implémentation ci-dessus, le gestionnaire d'événements onclick n'est pas enregistré pour chaque cellule. Au lieu de cela, le gestionnaire d'événements onclick est enregistré sur la table des éléments parent de la cellule. Lorsque vous cliquez sur la cellule, l'événement onclick sera déclenché et l'événement sera déclenché. Il se propage également vers le haut à partir de l'objet événement, et l'élément table a un gestionnaire d'événement onclick enregistré. Ce gestionnaire sera exécuté à ce moment-là. Bien sûr, le problème de la transmission des paramètres de l'objet événement sera défini ici. Tous les navigateurs prennent en charge le bouillonnement d'événements. 2. Capture d'événement :
La capture d'événements est exactement l'opposé du bouillonnement d'événements. Lorsqu'un élément est cliqué, la direction de propagation de l'événement va de l'élément racine vers l'élément déclencheur. IE ne prend pas en charge cela. Pour la prise en charge entre navigateurs, le bouillonnement est généralement utilisé par défaut. Modèle de traitement des événements de bulles.
2.javascript empêche le code de bouillonnement d'événement
La propagation d'événements est très utile dans certains scénarios, mais elle doit parfois être évitée. Voici un exemple de code compatible avec tous les principaux navigateurs pour empêcher la propagation d'événements.
Exemple de code :

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

Copier après la connexion

Le code ci-dessus peut empêcher l'événement de bouillonner. Voici un bref commentaire sur le code :
2. Commentaires du code :

1. function stopBubble(e) {}, cette fonction est utilisée pour empêcher les événements de bouillonner, et le paramètre est un objet événement.
2. if(e&&e.stopPropagation){e.stopPropagation();}, déterminez si stopPropagation est pris en charge. S'il est pris en charge, utilisez e.stopPropagation(). La fonction stopPropagation() n'est pas prise en charge par IE10 et les navigateurs inférieurs à IE10.
3.window.event.cancelBubble=true, le navigateur IE actuel l'utilise pour empêcher la propagation d'événements.

Ce qui précède est une introduction détaillée au bouillonnement d’événements JavaScript. J’espère que cela sera utile à l’apprentissage de chacun.