对事件的冒泡比bubble的代码分析

这篇文章主要介绍了关于对事件冒泡比bubble的代码分析,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

冒泡的概念就是  当子元素触发事件的时候  相应的祖宗十八代素也会触发相同的事件

(前提父元素也添加了一样的事件)

eg:儿子 有一个onclick  祖宗十八代 也有onclick

   当点击儿子的时候  祖宗十八代的点击事件也会被触发

   有时候这种情况会导致很多问题  所以要阻止冒泡

   只有被点击的元素才触发事件

   不是所有的事件都会冒泡

   onblur onfocus  onload  onerror 没有

  其实事件的触发一共有三个过程 : 捕获阶段—>处于目标阶段—->冒泡阶段

  标准浏览器冒泡顺序 子元素–>父辈–>body–>document—>window

  IE 子元素–>父辈–>body–>document

  接下来上代码  很容易  做一个兼容处理就好了

nbsp;html>             阻止冒泡                     var btn=document.getElementById("cancelBubble");          document.onclick=function(){            alert("冒泡");          }          btn.onclick=function(event){          var event=event||window.event;//兼容          if(event && event.stopPropagation){                              event.stopPropagation();                    }          else{              //IE 678             event.cancelBubble=true;          }           alert("没有冒泡");                    }     

登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

对于NodeJS如何操作消息队列RabbitMQ的分析

 对于NodeJS如何操作消息队列RabbitMQ的分析

以上就是对事件的冒泡比bubble的代码分析的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2746080.html

(0)
上一篇 2025年3月8日 03:53:06
下一篇 2025年3月8日 03:53:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js如何实现鼠标点击显示提示框效果?js事件冒泡实现效果(代码实例)

    本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 先看看效果图: 代码实例: nbsp;html>        事件冒泡-提示框button { wi…

    2025年3月8日
    200
  • JavaScript事件捕获与事件冒泡

    冒泡机制 气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经过不同深度层次的水。相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树;事件从dom 树的底层,层层往上传递,直至传递到dom的根节点。当子…

    2025年3月8日
    200
  • 浅谈JavaScript中的事件冒泡和事件捕获

    相关推荐:《javascript视频教程》 JS事件流原理图: 由此可知道,一个完整的JS事件流是从window开始,最后回到window的一个过程;事件流被分为三个阶段:捕获过程(1~5)、目标过程(5~6)、冒泡过程(6~10); 立即…

    2025年3月7日
    200
  • Javascript如何阻止事件冒泡和事件本身发生

        在javascript中事件冒泡是由节点产生,然后会影响到父节点,逐级上升,最后慢慢影响到整个页面,但是有时我们想要阻止事件冒泡的发生甚至事件本身的发生呢?本文就带大家一起来了解一下。 1.阻止事件冒泡发生 nbsp;html&gt…

    编程技术 2025年3月7日
    200
  • 一文搞懂JS中的事件冒泡机制

    本篇文章聊聊事件冒泡,带大家深入了解一下JS中的事件冒泡机制,希望对大家有所帮助! 1. 事件          在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作。          浏览器的事件表示的是某…

    2025年3月7日 编程技术
    200
  • js事件冒泡可以解决哪些问题

    js事件冒泡可以解决的问题:1、简化事件处理逻辑;2、提高事件处理性能;3、实现自定义组件和交互效果;4、控制事件传播方向;5、解决事件覆盖问题;6、实现全局事件监听;7、方便调试和排查问题。详细介绍:1、简化事件处理逻辑,在复杂的Web应…

    2025年3月7日
    200
  • 确保事件冒泡不会引起不必要的问题的方法

    如何避免事件冒泡引发的不必要问题,需要具体代码示例 事件冒泡是指当一个元素上的事件被触发时,相邻的父元素上的同一事件也会被触发。这种事件传播的机制可能引发一些不必要的问题,例如无法准确地捕捉到事件源、造成性能问题等。为了避免这些问题,我们可…

    2025年3月7日
    200
  • 事件冒泡与事件捕获的区别与应用

    事件冒泡与事件捕获的区别与应用 事件冒泡和事件捕获是HTML DOM中事件传递的两种机制。在开发网页应用时,了解它们的区别和应用可以帮助我们更好地理解事件的行为,并根据实际需求选择适当的传递机制。 事件冒泡 (Event Bubbling)…

    2025年3月7日
    200
  • 事件冒泡的应用场景有哪些?

    事件冒泡常用于哪些场景?——深入理解事件冒泡原理及其应用 事件冒泡是Web开发中常用的一种事件模型,它能够简化代码结构,并且提供了一种有效的方式来处理大量类似事件的情况。本文将深入探讨事件冒泡的原理,以及在实际应用中的常见场景,并提供具体的…

    2025年3月7日
    200
  • 优化网页交互的方法:事件冒泡的应用

    如何利用事件冒泡优化网页交互? 事件冒泡是指在网页中,当一个元素上的事件被触发,它会被依次传递给该元素的父元素,直到传递给了文档根元素。利用事件冒泡机制,我们可以更加高效地管理网页中的事件处理,提升用户体验。本文将介绍如何利用事件冒泡来优化…

    2025年3月7日
    200

发表回复

登录后才能评论