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>
  • 相关阅读:
    ECharts学习总结(四):echarts的实例方法
    ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
    ECharts学习总结(二):标签式单文件引入echarts的方法
    ECharts学习总结(一):ECharts的第一个图表
    Eclispe最常用的几个快捷键
    javascript数组去重的4个方法(转)
    数据库主键设计之思考(转)
    数据库插入数据返回当前自增主键ID值的方法
    Node.js制作图片下载爬虫的一般步骤
    Node.js mzitu图片批量下载爬虫1.00
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13054558.html
Copyright © 2011-2022 走看看