Memahami acara jquery bubbling_jquery-tutorial js-php.cn

Memahami acara jquery bubbling_jquery

WBOY

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

asal

1125 orang telah melayarinya

1. Apakah acara jquery menggelegak
Banyak buku teks atau manual mungkin melibatkan konsep acara menggelegak Ini sudah tentu konsep yang paling asas untuk veteran, tetapi ia sering tidak biasa kepada pemula atau mereka tidak pernah mendengarnya. Mari kita perkenalkan secara ringkas apakah peristiwa menggelegak dengan contoh kod.
Contoh kod adalah seperti berikut:

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

Salin selepas log masuk

Dalam kod di atas, kita mungkin hanya mahu muncul "Saya ketiga" selepas mengklik titik utama, tetapi yang peliknya ialah semua peristiwa klik yang ditakrifkan oleh elemen induk akan dicetuskan. Ini adalah kesan menggelegak acara biasa. Apa yang dipanggil peristiwa menggelegak bermakna jika jenis peristiwa tertentu dicetuskan pada objek (seperti peristiwa klik dalam contoh di atas), maka peristiwa ini akan merebak ke objek induk objek dan mencetuskan peristiwa serupa yang ditakrifkan pada objek induk . Arah perambatan peristiwa adalah dari bawah ke atas, sama seperti gelembung air yang naik dari dasar air.
2. Bagaimana untuk mengelakkan acara daripada menggelegak dengan JavaScript
Acara menggelegak boleh membawa kemudahan, tetapi kadangkala ia juga boleh menyebabkan masalah. Berikut ialah pengenalan ringkas tentang cara mengelakkan acara daripada menggelegak.
Contoh kod adalah seperti berikut:

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

Salin selepas log masuk

Ulasan kod:
1.if(window.event) digunakan untuk serasi dengan pelayar IE8 dan IE8.
2. evt.stopPropagation() ialah pelayar standard.

Dalam kod di atas, satu sel menghalang acara daripada menggelegak dan satu lagi tidak menghalang acara daripada menggelegak, saya harap ia akan membantu pembelajaran semua orang.