zoukankan      html  css  js  c++  java
  • JavaScript系列之事件冒泡机制简介

    JavaScript系列之事件冒泡机制

    DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播。

    听了简介介绍之后,您可能不理解,所以举个例子:

    <html>
    <head>
    <title>js事件冒泡测试</title>
    </head>
    <body>
    <div id='content' onclick='alert("content")'>
    <div id='div' onclick='alert("div");'>
    <ul onclick='alert("ul");'>
    <li onclick='alert("li");'>test</li>
    </ul>
    </div>
    </div>
    </body>
    </html>
    

    点击test页签,会依次执行li的onclick、ul的onclick、div的onclick,content的onclick,从内到外执行,所以这个就是冒泡事件的简单例子

    最近也遇到了这种情况,所以就去网上搜索资料,简单学习一下,就是点击一个按钮的时候,竟然触发了两次,通过排查,发现了冒泡机制导致的,解决方法是禁用事件冒泡机制

    w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

    $(element).click(function(e){
       e.stopPropagation();//ie e.cancelBubble = true
    });
    

    当然除了冒泡机制会导致onclick被调用两次外,事件被绑定2次的情况也有可能,解决方法是解除事件,然后再绑定

    $(element).unbind('click').click(function() {
            // todo    
    })
    

    参考资料:
    JavaScript 详说事件机制之冒泡、捕获、传播、委托:https://www.cnblogs.com/bfgis/p/5460191.html

  • 相关阅读:
    grub menu from pygrub
    Unix调试的瑞士军刀:lsof
    Quantum & r2q
    Linux TC基于CBQ队列的流量管理范例
    hfsc
    用bash做个tcp客户端
    [转]HFSC Scheduling with Linux
    [转]如何判断 Linux 是否运行在虚拟机上
    TSO
    使用VS2008进行WEB负载测试
  • 原文地址:https://www.cnblogs.com/mzq123/p/12182149.html
Copyright © 2011-2022 走看看