非IE冒泡与捕获

最新推荐文章于 2019-10-09 09:36:39 发布

github_turboemily

最新推荐文章于 2019-10-09 09:36:39 发布

阅读量163

点赞数

分类专栏：兼容文章标签：兼容捕获冒泡

本文链接：https://blog.csdn.net/github_35549695/article/details/52594403

版权

兼容专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:500px;
            height: 500px;
            background-color: aqua;
        }
        #div2{
            width:300px;
            height: 300px;
            background-color:darkcyan;
        }
        #div3{
            width:100px;
            height: 100px;
            background-color:darksalmon;
        }
    </style>
    <script>

        window.onload = function(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            var div3 = document.getElementById('div3');

            div1.addEventListener('click',function(){
                alert('div1');
            },true);//捕获
            div3.addEventListener('click',function(e){
                alert('div3');
               // e.stopPropagation();阻止事件冒泡

            },true);//目标函数

            div1.addEventListener('click',function(){
                alert('div1');
            },false);//冒泡

            

        }

    </script>
</head>
<body>

<div id="div1">

    <div id="div2">

        <div id="div3">

        </div>
    </div>
</div>
</body>
</html>

非IE浏览器既有捕获又有冒泡

true=捕获

false=冒泡

当我点击div3的时候，先捕获弹出div1，在弹出div3,最后冒泡弹出div1；

像我们平时在传统的绑定事件中，element.onclick = dosomething;是采用了事件冒泡方式。

github_turboemily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录