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>
  • 相关阅读:
    C# Lambda表达式
    .NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy
    SQL中的case when then else end用法
    WPF gif图片不动问题解决
    async(C# 参考)
    File类 ReadAllBytes() ReadAllLines() ReadAllText()
    二维码生成的常用数据格式
    在chrome console加入jquery库
    Reflector反编译WinForm程序重建项目资源和本地资源
    使用Settings.settings存储用户的个性化配置
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13054558.html
Copyright © 2011-2022 走看看