首页 > 代码库 > DOM 事件冒泡

DOM 事件冒泡

2024-10-14 19:07:39   220人阅读

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=http://www.mamicode.com/"按钮" id="btn">
</body>
</html>

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

　　1.>事件捕获阶段

　　2.>处于目标阶段

　　3.>事件冒泡阶段

4.事件捕获阶段

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

　　

     },true)

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

5.阻止事件冒泡    stopPropagation()

　　

　　　　　　

DOM 事件冒泡


联系
我们