在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 事件捕獲的疑問

事件捕獲的疑問

<style>
div {padding: 50px;}
 #div1 {background: red;}
 #div2 {background: blue;}
 #div3 {background: green; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() {
        
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    
    function fn1() {
        alert( this.id );
    }
    oDiv1.addEventListener('click', function() {
        alert(1);
    }, false);
    oDiv1.addEventListener('click', function() {
        alert(3);
    }, true);
    oDiv3.addEventListener('click', function() {
        alert(2);
    }, false);
    //
    
}
</script>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>

代碼如上：當點擊div2的時候是先彈出3，再彈出1的；但是直接點擊div1的時候是先彈出1，再彈出3的。按照理解點擊div1時應該和點擊div2一樣的彈出順序啊？希望大神給予解答

回答
編輯回答
冷咖啡

因為事件觸發(fā)是先捕獲再冒泡的，所以點擊div2時候是先3再1,。
然后直接點擊在元素上時，其實是相當于同時觸發(fā)了捕獲和冒泡，這個時候的順序是根據(jù)你代碼的綁定事件的先后順序。

2018年1月31日 16:38
編輯回答
伴謊

看了一樓的答案我懂了，點了個贊。

就是點擊div1的時候，因為沒有點擊到div1下的子元素，所以只會觸發(fā)綁定在div1上面的事件。
樓主請看下圖，此時對于div1，捕獲與冒泡事件均是在中間那一點時觸發(fā)，就是在同一時間觸發(fā)，所以這時觸發(fā)的順序是按照事件綁定的先后順序來，而不是非得捕獲在前了

clipboard.png

2017年4月25日 15:37