事件冒泡

時間 2019-11-18

原文原文鏈接

定義:JavaSciprt事件中有兩個很重要的特性：事件冒泡以及目標元素。javascript

事件冒泡: 當一個元素上的事件被觸發的時候，好比說鼠標點擊了一個按鈕，一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。css

目標元素: 任何一個事件的目標元素都是最開始的那個元素，而且它在咱們的元素對象中以屬性的形式出現。使用事件代理的話咱們能夠把事件處理器添加到一個元素上，等待一個事件從它的子級元素裏冒泡上來，而且能夠很方便地得知這個事件是從哪一個元素開始的。html

個人目的很簡單,作一個類型window桌面的web頁面.當單擊開始菜單時彈出一個層,當單擊桌面其餘地方時隱藏開始菜單.之前對js的冒泡機制有點了解,知道window.event.cancelBubble 來設置是否啓用事件傳播.可是這隻能在IE是使用.若是跨瀏覽器就不太合適了.Jquery中的event.stopPropagation()解決了瀏覽器的兼容性.如下舉例說明:java

<html xmlns="http://www.w3.org/1999/xhtml">
<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>jquery

正常狀況下,咱們單擊div3會顯示"div3」—>"div2」—>"div1」—>"document」.可是咱們在div2上加上event.stopPropagation()後,單擊div3顯示順序爲"div3」—>"div2」, 當單擊div3時首先會觸發div3的click事件,而後根據dom模型傳播到div3的父節點也就是div2,而後執行div2的click事件,因爲在div2的click事件中加入了event.stopPropagation(),取消事件傳播,也就是說事件再也不向上傳播.web

再來看div1,正常狀況下單擊div1會顯示"div1」—>"document」.在div1中加入return false,經過返回false來取消默認的行爲並阻止事件起泡。單擊後只顯示"div1".瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。