事件捕获与冒泡

最新推荐文章于 2024-06-10 22:18:41 发布

有爱的萌哥

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量210

点赞数

分类专栏：个人总结前端面试考点文章标签： javascript

本文链接：https://blog.csdn.net/GJM_Memory/article/details/126418536

版权

个人总结前端面试考点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM事件流有三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

事件捕获比事件冒泡优先

addEventListener()有三个参数，分别是事件名、函数、布尔值（默认冒泡：false）

<body>
    <button>
        <span>按钮</span>
    </button>
    <script>
        var body=document.getElementsByTagName('body')[0]
        var button=document.getElementsByTagName('button')[0]
        var span=document.getElementsByTagName('span')[0]
        function fn(){
            console.log("我是",this.nodeName);
        }
        body.addEventListener("click",fn,false)
        button.addEventListener("click",fn,false)
        span.addEventListener("click",fn,false)
    </script>
</body>

<body>
    <button>
        <span>按钮</span>
    </button>
    <script>
        var body=document.getElementsByTagName('body')[0]
        var button=document.getElementsByTagName('button')[0]
        var span=document.getElementsByTagName('span')[0]
        function fn(){
            console.log("我是",this.nodeName);
        }
        body.addEventListener("click",fn,true)
        button.addEventListener("click",fn,true)
        span.addEventListener("click",fn,true)
    </script>
</body>

可以通过stopProgation()阻止事件冒泡

有爱的萌哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获与冒泡

addEventListener()有三个参数，分别是事件名、函数、布尔值（默认冒泡：false）DOM事件流有三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。可以通过stopProgation()阻止事件冒泡。事件捕获比事件冒泡优先。
复制链接

扫一扫