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

  • 相关阅读:
    461. Hamming Distance
    342. Power of Four
    326. Power of Three
    368. Largest Divisible Subset java solutions
    95. Unique Binary Search Trees II java solutions
    303. Range Sum Query
    160. Intersection of Two Linked Lists java solutions
    88. Merge Sorted Array java solutions
    67. Add Binary java solutions
    14. Longest Common Prefix java solutions
  • 原文地址:https://www.cnblogs.com/mzq123/p/12182149.html
Copyright © 2011-2022 走看看