DOM事件流三个阶段

墨蓝 2023-10-03 14:48 24阅读 0赞

## DOM事件流三个阶段 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM事件流三个阶段</title>
        <style>
            .father {
          
                overflow: hidden;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background-color: pink;
                text-align: center;
            }
    
            .son {
          
                width: 200px;
                height: 200px;
                margin: 50px;
                background-color: purple;
                line-height: 200px;
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <div class="father">
            <div class="son">son盒子</div>
        </div>
        <script>
            // dom 事件流 三个阶段
            // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
    
            // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
    
            // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
    
            // var son = document.querySelector('.son');
    
            // son.addEventListener('click', function() {
          
            //     alert('son');
            // }, true);
    
            // var father = document.querySelector('.father');
            // father.addEventListener('click', function() {
          
            //     alert('father');
            // }, true);
    
            // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
    
            var son = document.querySelector('.son');
            son.addEventListener('click', function () {
          
                alert('son');
            }, false);
    
            var father = document.querySelector('.father');
            father.addEventListener('click', function () {
          
                alert('father');
            }, false);
    
            document.addEventListener('click', function () {
          
                alert('document');
            })
        </script>
    </body>
    
    </html>