DOM 事件冒泡

Posted 2020-09-26 信尔奕骄

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM 事件冒泡相关的知识，希望对你有一定的参考价值。

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()

以上是关于DOM 事件冒泡的主要内容，如果未能解决你的问题，请参考以下文章

事件高级 DOM事件流捕获阶段/冒泡阶段

事件捕获和事件冒泡理解

一个DOM元素绑定多个事件时，先执行冒泡还是捕获

ie和dom事件流的区别

DOM 事件不会在非 DOM 元素中冒泡