Maison > Article > interface Web > Comprendre l'événement jquery bubbling_jquery

Comprendre l'événement jquery bubbling_jquery

WBOYoriginal: 2016-05-16 15:22:071140parcourir

1. Qu'est-ce que l'événement jquery bouillonnant
De nombreux manuels ou manuels peuvent impliquer le concept de bouillonnement d'événements. Il s'agit bien sûr du concept le plus élémentaire pour les vétérans, mais il est souvent peu familier aux débutants ou n'en ont jamais entendu parler. Présentons brièvement ce qu'est le bouillonnement d'événements avec des exemples de code.
L'exemple de code est le suivant :

<html>
<head>
<meta charset=" gb2312">
<title>事件冒泡</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#second").click(function(){
  alert("我是second");    
 })
 $("#first").click(function(){
  alert("我是first");    
 })
})
</script>
</head>
<body>
<p id="first"><a id="second" href="http://www.baidu.com">点击查看效果</a></p>
</body>
</html>

Dans le code ci-dessus, nous souhaitons peut-être simplement afficher "Je suis troisième" après avoir cliqué sur le point d'ancrage, mais ce qui est étrange, c'est que tous les événements de clic définis par l'élément parent seront déclenchés. Il s’agit d’un effet de bouillonnement typique d’un événement. L'événement dit de bouillonnement signifie que si un certain type d'événement est déclenché sur un objet (comme l'événement click dans l'exemple ci-dessus), alors cet événement se propagera à l'objet parent de l'objet et déclenchera des événements similaires définis sur l'objet parent. . La direction de propagation des événements va du bas vers le haut, semblable aux bulles d’eau s’élevant du fond de l’eau.
2. Comment empêcher les événements de bouillonner avec JavaScript
Les événements bouillonnants peuvent être pratiques, mais ils peuvent parfois aussi causer des problèmes. Voici une brève introduction sur la façon d'empêcher les événements de bouillonner.
L'exemple de code est le suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>事件冒泡</title>
<style type="text/css">
#grandfather{
 border:1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
#grandfather td{
 border: 1px solid #0066FF;
}
</style>
<script type="text/javascript">
function trclick(){
 alert("父亲的onclick事件触发");
}
function tableclick(){
 alert("祖父的onclick事件触发");
}
window.onload=function(){
 var grandfather=document.getElementById("grandfather");
 var father=document.getElementById("father");
 var noStop=document.getElementById("noStop");
 var haveStop=document.getElementById("haveStop");
 
 grandfather.onclick=tableclick;
 father.onclick=trclick;
 
 noStop.onclick=function(){
 alert("没有阻止冒泡的子元素");
 }
 haveStop.onclick=function(evt){
 alert("阻止冒泡的子元素");
 if(window.event){
 event.cancelBubble=true;
 }
 else if(evt){
 evt.stopPropagation();
 }
 }
}
</script>
</head>
<body>
<table width="204" id="grandfather">
 <tr >
 <td width="96"></td>
 <td width="96"></td>
 </tr>
 <tr id="father">
 <td id="noStop">没有阻止事件冒泡</td>
 <td id="haveStop">阻止了事件冒泡</td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 </tr>
</table>
</body>
</html>

Commentaires du code :
1.if(window.event) est utilisé pour être compatible avec les navigateurs IE8 et IE8.
2. evt.stopPropagation() est un navigateur standard.

Dans le code ci-dessus, une cellule empêche l'événement de bouillonner, et l'autre n'empêche pas l'événement de bouillonner. J'espère que cela sera utile à l'apprentissage de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une analyse approfondie des modules dans AngularJS_AngularJSArticle suivant：Une analyse approfondie des modules dans AngularJS_AngularJS

Articles Liés

Voir plus