zoukankan      html  css  js  c++  java
  • 事件冒泡

    在工作做事件冒泡经常遇到,但是事件冒泡很多时候是有作用的。比如我弄一个嵌套层事件,来验证事件冒泡。

    <body>
        <div id="box1">
        我是div
        <span id="s1">我是span</span>
        </div>
    </body>

    首先,给span和div和body绑定响应函数:

                    box1 = document.getElementById("box1");
                    box1.onclick = function(){
                        alert("我是div")
                    
                    }
                    
                    s1 = document.getElementById("s1");
                    s1.onclick = function(event){
                        alert("我是span")
                        //兼容
                        event = event || window.event
                //取消冒泡 event.cancelBubble = true; } document.body.onclick = function(){ alert("我是body的响应函数") }

    当点击span的响应函数时,div和body的响应函数都发生了,这是因为冒泡事件。

    通过点击span发生响应,div和body都发生响应,这种影响关系称为事件冒泡
    * 事件冒泡(BUbble)
    * - 所谓的冒泡就是指事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
    * - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡。,就是谁产生的吗,冒泡就在谁那里取消,比如
    * 这个例子,span是最里层的元素,冒泡是由span产生或者div产生,所以取消冒泡就是在后代元素上取消,祖先元素就不会收到后代元素的影响了。(所有浏览器现在都兼容)

  • 相关阅读:
    SSH框架中使用Oracle数据库转换为SQLServer的相关配置和注意事项
    MYSQL性能优化系统整理
    PHP时间处理
    debian9 VirtualBox rc=-1908的错误
    https://snapcraft.io/store
    中文转拼音 pinyin4j的使用
    java对象转数组|数组转对象
    Deflater 压缩解压
    spring的RestTemplate连接池相关配置
    spring获取指定包下面的所有类
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9317057.html
Copyright © 2011-2022 走看看