Grundlegendes zum JQuery-Ereignis bubbling

Grundlegendes zum JQuery-Ereignis bubbling_jquery

WBOY

Freigeben： 2016-05-16 15:22:07

Original

1217 Leute haben es durchsucht

1. Was ist Jquery Event Bubbling?
In vielen Lehrbüchern oder Handbüchern wird das Konzept des Event-Bubblings behandelt. Dies ist natürlich das grundlegendste Konzept für Veteranen, aber Anfängern ist es oft unbekannt oder sie haben noch nie davon gehört. Lassen Sie uns anhand von Codebeispielen kurz vorstellen, was Event-Bubbling ist.
Das Codebeispiel lautet wie folgt:

<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>

Nach dem Login kopieren

Im obigen Code möchten wir nach dem Klicken auf den Ankerpunkt möglicherweise nur „Ich bin Dritter“ anzeigen, aber das Seltsame ist, dass alle durch das übergeordnete Element definierten Klickereignisse ausgelöst werden. Dies ist ein typischer Event-Bubbling-Effekt. Das sogenannte Bubbling-Ereignis bedeutet, dass, wenn ein bestimmter Ereignistyp für ein Objekt ausgelöst wird (z. B. das Klickereignis im obigen Beispiel), dieses Ereignis an das übergeordnete Objekt des Objekts weitergegeben wird und ähnliche Ereignisse auslöst, die für das übergeordnete Objekt definiert sind . Die Ausbreitungsrichtung des Ereignisses verläuft von unten nach oben, ähnlich wie Wasserblasen, die vom Grund des Wassers aufsteigen.
2. So verhindern Sie, dass Ereignisse mit JavaScript sprudeln
Sprudelnde Ereignisse können Bequemlichkeit bringen, manchmal aber auch Probleme verursachen. Hier finden Sie eine kurze Einführung, wie Sie das Sprudeln von Ereignissen verhindern können.
Das Codebeispiel lautet wie folgt:

<!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>

Nach dem Login kopieren

Codekommentare:
1.if(window.event) wird verwendet, um mit IE8- und IE8-Browsern kompatibel zu sein.
2. evt.stopPropagation() ist ein Standardbrowser.

Im obigen Code verhindert eine Zelle, dass das Ereignis sprudelt, und die andere verhindert nicht, dass das Ereignis sprudelt. Ich hoffe, dass dies für das Lernen aller hilfreich ist.