zoukankan      html  css  js  c++  java
  • DOM 事件流 事件冒泡

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* .father {
                position: relative;
                 500px;
                height: 500px;
                pink;
                margin: 0 auto;
            } */
            
            .father {
                overflow: hidden;
                 300px;
                height: 300px;
                margin: 100px auto;
                background-color: pink;
                text-align: center;
            }
            /* .son {
                position: absolute;
                left: 100px;
                top: 100px;
                 300px;
                height: 300px;
                purple;
            } */
            
            .son {
                 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>
            //  true 是 捕获阶段 从上往下 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);

            //  默认是冒泡阶段  从下往上 son-》》father-》body
            var son = document.querySelector('.son');
            var father = document.querySelector('.father');
            father.addEventListener('click', function() {
                alert('father');
            });
            son.addEventListener('click', function() {
                alert('son');
            });
        </script>
    </body>

    </html>
  • 相关阅读:
    Go part 7 反射,反射类型对象,反射值对象
    activemq BytesMessage || TextMessage
    Go part 6 接口,接口排序,接口嵌套组合,接口与类型转换,接口断言
    mysql 查询表的字段名称,字段类型
    冒泡(bubblesort)、选择排序、插入排序、快速排序
    用 python 写一个模拟玩家移动的示例
    day 14(作业)
    day 13
    day 12
    day 11
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13054558.html
Copyright © 2011-2022 走看看