惡補jquery(四)jquery中事件--冒泡
阿新 • • 發佈：2019-02-13
事件
當我們在開啟一個頁面的時候，瀏覽器會對頁面進行解釋執行，這實際上是通過執行事件來驅動的，在頁面載入事件時，執行Load（）事件，是這個事件實現瀏覽器解釋執行程式碼的過程。
事件機制
事件中的冒泡現象
冒泡現象說的是事件執行順序，當一個物件上觸發了一個事件，如果沒有定義此事件的處理程式或者事件返回true，那麼這個事件就會向這個物件的父級物件傳播，從裡到外，直到他被處理（父級物件所有同類事件都被啟用），或者它到達了物件層次的頂層（即document物件）。
通俗的講：假把設一杯水分成不同顏色的幾層，加熱水的時候，當底層中有一個氣泡出現時，氣泡會一層層的上升，直到最層頂部。而我們不管在哪一層觀察都能捕捉到這個氣泡，這杯水就是我們的”DOM“，”氣泡“就是我們的事情氣泡。
事件冒泡示例
如下程式碼所示
執行結果如圖1：<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <style type="text/css"> #box {width:200px; height:100px; border:2px solid blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move} #box h5 a {text-decoration:none; color:#FFF} </style> </head> <body> <div id="box"> <h5 onclick="startDrag();"><a onclick="closeBox();" href="javascript:void(0);">close</a></h5> <div id="testInfo"></div> </div> <script type="text/javascript"> function startDrag() { document.getElementById('testInfo').innerHTML += 'startDrag<br/>'; } function closeBox() { document.getElementById('testInfo').innerHTML += 'closeBox<br/>'; } </script> </body> </html></span>
圖1
由此我們可以看到，對於同一事件來說（都是onclick事件），先是底層觸發，再是上一層觸發事件，也就是”從裡向外冒泡“。
而當我們把父類的h5標籤的事件改為onmousedown的時候，我們會看到下面的結果。雖然針對冒泡而言應該是裡層的先觸發，但是對於事件onmousedown來說，觸發時機遭遇onclick事件。
圖2
那如何阻止冒泡？
js阻止冒泡現象
如下程式碼所示：
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript</title> <style type="text/css"> #box {width:200px; height:100px; border:2px solid blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move} #box h5 a {text-decoration:none; color:#FFF} </style> </head> <body> <div id="box"> <h5 onclick="startDrag();"><a onclick="closeBox();" href="http://blog.csdn.net/lovesummerforever">close</a></h5> <div id="testInfo"></div> </div> <script type="text/javascript"> function startDrag() { document.getElementById('testInfo').innerHTML += 'startDrag<br/>'; } function closeBox(e) { document.getElementById('testInfo').innerHTML += 'closeBox<br/>'; stopPropagation(e); } function stopPropagation(e) { e = e || window.event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } } </script> </body> </html></span>
jquery阻止冒泡現象
如果是通過jquery訪問的話，阻止冒泡現象方法如下
<span style="font-size:14px;"> $(function() {
$("a").click(function(event) {
return false;
});
});</span><span style="font-size:14px;">$(function() {
$("a").click(function(event) {
event.stopPropagation();
});
});</span>還有一個方法是event.preventDefault() ，該方法並不是處理事件的冒泡，而是阻止事件的預設行為。return false方法既阻止了冒泡，也阻止了事件的預設行為，event.stopPropagation()只阻止了事件的冒泡行為，但不阻止事件的預設行為。