zoukankan      html  css  js  c++  java
  • 深入理解事件捕获冒泡

    看到一个网友的日志,发现自己对事件冒泡捕获并没有完全理解透。借用一下这个例子和大家探讨一下:
    <!-- 假设有html片段如下 -->
    <body>
        <div style="200px;height:200px;background-color:red;">
    </div>

    </body> 

    <script>
    /* 假设有脚本片段如下 */
    document.body.addEventListener(
        "mousedown",
        function(e){
            console.log("timing:", e.eventPhase, '事件一');
        },
        false
    );
    document.body.addEvnetListener(
        "mousedown",
        function(e){
            console.log("timing:", e.eventPhase, "事件二");
        },
        true

    );
    点击红色区域div,输出:timing: 1 事件二触发 timing: 3 事件一触发 
    点击空白区域body  输出:timing: 2 事件一触发 timing: 2 事件二触发 
    绑定事件的第三个参数表示事件触发的时机,true是捕获阶段触发,false是冒泡阶段触发,捕获阶段触发事件会稍微快一点点,但是IE只支持事件冒泡。
    给元素绑定多个事件 执行的顺序  :标准浏览器下顺序执行,IE下倒序执行    (前提条件--绑定事件的触发时机必须一致,这里是不一定一致的,如果点击body哪eventPhase都为2顺序执行,如果点击红色区域,一个eventPhase为1,一个为3所以为1的先执行)

  • 相关阅读:
    Linux下C程序内存泄露检测
    C++的XML编程经验――LIBXML2库使用指南
    C的xml编程-libxml2
    15 手写数字识别-小数据集
    14 深度学习-卷积
    13-垃圾邮件分类2
    12.朴素贝叶斯-垃圾邮件分类
    11.分类与监督学习,朴素贝叶斯分类算法
    9、主成分分析
    7.逻辑回归实践
  • 原文地址:https://www.cnblogs.com/chengzhenping/p/3498268.html
Copyright © 2011-2022 走看看