DOM 事件冒泡

最新推荐文章于 2023-08-09 15:04:18 发布

会做饭的技术男

最新推荐文章于 2023-08-09 15:04:18 发布

阅读量262

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjii121a20bb&title=DOM+%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1

版权

前端专栏收录该内容

2508 篇文章 11 订阅

订阅专栏

1.什么是事件冒泡？

　　事件冒泡就是从具体到不具体，

　　例如：当你给了一个button按钮一个点击事件，再给他的父级相同的事件，就会按照，button，body，document，window，继续向上冒泡。

2。什么是事件捕获？

　　从不具体到具体，跟事件冒泡刚好相反。window document body button 。

　　例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn');

            oBtn.setCapture();
            oBtn.onclick = function(){
                alert('1');
            }
        }
    </script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>

3.Dom事件流包括三个阶段。

　　1.>事件捕获阶段

　　2.>处于目标阶段

　　3.>事件冒泡阶段

4.事件捕获阶段

　　window.addEventListener('click',function(){

},true)

为true代表事件使用事件捕获模式，false则代表使用事件冒泡

5.阻止事件冒泡 stopPropagation()

会做饭的技术男

关注

0
点赞
踩
0

收藏

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

1.什么是事件冒泡？　　事件冒泡就是从具体到不具体，　　例如：当你给了一个button按钮一个点击事件，再给他的父级相同的事件，就会按照，button，body，document，window，继续向上冒泡。2。什么是事件捕获？　　从不具体到具体，跟事件冒泡刚好相反。window document body button 。　　例如：<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫