js事件冒泡機制簡述
定義:JavaSciprt事件中有兩個很重要的特性：事件冒泡 以及目標元素 。
事件冒泡: 當一個元素上的事件被觸發的時候，比如說滑鼠點選了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。
目標元素: 任何一個事件的目標元素都是最開始的那個元素，並且它在我們的元素物件中以屬性的形式出現。使用事件代理的話我們可以把事件處理器新增到一個元素上，等待一個事件從它的子級元素裡冒泡上來，並且可以很方便地得知這個事件是從哪個元素開始的。
我的目的很簡單,做一個型別window桌面的web頁面.當單擊開始選單時彈出一個層,當單擊桌面其他地方時隱藏開始選單.以前對js的冒泡機制有點了解,知道window.event.cancelBubble 來設定是否啟用事件傳播.但是這隻能在IE是使用.如果跨瀏覽器就不太合適了.Jquery中的event.stopPropagation()解決了瀏覽器的相容性.以下舉例說明:
<!DOCTYPE html>
<head>
<title>jQuery - Start Animation</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
<script type="text/javascript">
$(function () {
$("div").css({ border: "1px solid red" });
$("#div1").css({ height: "500px", width: "500px" }).bind("click", function (event) { alert("div1"); return false;});
$("#div2").css({ height: "300px", width: "300px" }).bind("click", function (event) { event.stopPropagation(); alert("div2"); });
$("#div3").css({ height: "100px", width: "100px" }).bind("click", function (event) { alert("div3"); });
$(document).bind("click", function (event) { alert("document"); });
});
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
</body>
</html>
正常情況下,我們單擊div3會顯示"div3”—>"div2”—>"div1”—>"document”.但是我們在div2上加上event.stopPropagation()後,單擊div3顯示順序為"div3”—>"div2”, 當單擊div3時首先會觸發div3的click事件,然後根據dom模型傳播到div3的父節點也就是div2,然後執行div2的click事件,由於在div2的click事件中加入了event.stopPropagation(),取消事件傳播,也就是說事件不再向上傳播.
再來看div1,正常情況下單擊div1會顯示"div1”—>"document”.在div1中加入return false,通過返回false來取消預設的行為並阻止事件起泡。單擊後只顯示"div1".