事件捕获，事件冒泡，事件取消

2022-01-01 10:00:15

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<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 );
    }
    //依次执行321
    oDiv1.onclick = fn1;
    oDiv2.onclick = fn1;
    oDiv3.onclick = fn1;
    
    //false表示冒泡
    //告诉div1，如果有一个      出去        的事件触发了你，你就去执行fn1这个函数，先执行3最后执行1。
    oDiv1.addEventListener('click', fn1, false);
    oDiv2.addEventListener('click', fn1, false);
    oDiv3.addEventListener('click', fn1, false);
    
    //告诉div1，如果有一个       进去     的事件触发了你，你就去执行fn1这个函数，先执行1最后执行3。
    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);
    //执行321
    
}
</script>
</head>

<body>
点击div3时，进来的点击事件（事件捕获）从1到3，出去的点击事件（事件冒泡）从3到1.每个div经历2个点击事件。
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
第一种事件绑定形式的取消
*/
function fn1() {
    alert(1);
}
function fn2() {
    alert(2);
}

document.onclick = fn1;
document.onclick = null;    //取消，如果是通过attachEvent实现的绑定则不能这么取消。

/*
ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
*/
document.attachEvent('onclick', fn1);
document.attachEvent('onclick', fn2);
document.detachEvent('onclick', fn1);

document.addEventListener('click', fn1, false);//绑定出去的函数
document.addEventListener('click', fn1, true);//绑定进来的函数
document.addEventListener('click', fn2, false);

document.removeEventListener('click', fn1, false);//取消出去的函数
</script>
</head>

<body>
</body>
</html>

本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/5725566.html，如需转载请自行联系原作者

码农公寓

相关文章