Heim > Artikel > Web-Frontend > Grundlegendes zum JQuery-Ereignis bubbling_jquery

Grundlegendes zum JQuery-Ereignis bubbling_jquery

WBOYOriginal: 2016-05-16 15:22:071140Durchsuche

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>

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine eingehende Analyse der Module in AngularJS_AngularJSNächster Artikel：Eine eingehende Analyse der Module in AngularJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen