首页 > 代码库 > 事件捕获 & 事件冒泡

事件捕获 & 事件冒泡

2024-09-13 14:42:06   214人阅读

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

<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.onclick = fn1;
    oDiv2.onclick = fn1;
    oDiv3.onclick = fn1;*/
    
    //false = 冒泡（出去）     true = 捕获（进来）
    
    //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
    /*oDiv1.addEventListener(‘click‘, fn1, false);
    oDiv2.addEventListener(‘click‘, fn1, false);
    oDiv3.addEventListener(‘click‘, fn1, false);*/
    
    //告诉div1，如果有一个进来的事件触发了你，你就去执行fn1这个函数
    /*oDiv1.addEventListener(‘click‘, fn1, true);
    oDiv2.addEventListener(‘click‘, fn1, true);
    oDiv3.addEventListener(‘click‘, fn1, true);*/
    
    oDiv1.addEventListener(‘click‘, function() {
        alert(1);
    }, false);
    oDiv1.addEventListener(‘click‘, function() {
        alert(3);
    }, true);
    oDiv3.addEventListener(‘click‘, function() {
        alert(2);
    }, false);
    //3 2 1
    
}
</script>

 

事件捕获 & 事件冒泡


联系
我们