当事件的目标是 Winow 对象,或其他独立对象(如 XMLHttpRequest)时,浏览器对于事件的回应就只是在这个对象上调用相应的处理器。当事件的目标是 Document 或 document Element,则情况更复杂一些。
当该目标元素上注册的事件处理器调用后,大多数事件会沿着 DOM 树冒泡。目标的父元素上的事件处理器会调用。然后就是父父元素,一直到 Document 对象,之后就是 Window 对象。事件冒泡为在大量单独文档元素上注册处理程序提供了替代方案,即在共同的祖先元素上注册一个处理程序来处理所有的事件。例如,可以在<form>元素上注册“change”事件处理程序来取代在表单的每个元素上注册“change”事件处理程序。
发生在文档元素上的大多数事件都会冒泡,值得注意的是 focus、blur、scroll 是例外。文档元素上的 load 事件会冒泡,但只冒泡到 Document 对象,不会传播到 Window 对象。只有当整个文档加载完毕才会触发 Window 对象的 load 事件。
事件冒泡是事件传播的第三阶段。目标对象自身调用事件处理器是第二阶段。第一阶段发生在调用目标对象上的事件处理程序之前,叫捕捉阶段。还记得 addEventListener()有一个boolean值作为它的第三个参数,当值为 true 时,该事件处理器是被注册为一个捕捉事件处理器,用于在事件传播的第一阶段调用。事件传播被广泛支持:包括IE在内的所有浏览器都行,并且是所有的处理器都行,不管它们是如何注册的(除非它们是被注册为捕捉事件处理器)。事件捕捉,相反,只对那些用 addEventListener()注册的且第三个参数是true的管用。就这意味着,IE 9 之前的版本不支持事件捕捉,并且,在写这本书的时候,事件捕捉也不是一个常用的技术。
事件传播的捕获阶段像倒过来的冒泡阶段。Window 对象上的捕捉处理器会最先调用,之后是 Document 对象上的捕捉处理器,之后是 body 对象,等等,沿着 DOM 树一直到事件目标的父元素上的捕捉事件处理器被调用。注册在事件目标自身上的捕捉事件处理器不会调用。
事件捕获提供了在事件没有送达目标之前查看它们的机会。事件捕获可以被用于程序调试,或用于事件取消技术,过滤掉事件从而使目标事件处理程序不会被调用。常用的一个情况就是处理鼠标拖放,鼠标动作事件需要被被拖放的对象来处理,not the document elements over which it is dragged。
相关推荐
JavaScript防止事件传播是一种常见的前端开发技术,用于控制事件在DOM(文档对象模型)层次中的传播方式。事件传播包括三个阶段:捕获阶段、目标阶段和冒泡阶段。了解这三个阶段对于掌握如何阻止事件传播至关重要。 ...
由于提供的【部分内容】实际上是一段无意义的字符序列,不具备可解读的信息内容,我将忽略这一部分,转而针对【标题】和【描述】提供的信息,详细阐释在标题“基于微博的事件传播分析”下可以理解的知识点。...
本文将深入探讨“QT事件系统一:父子组件之间的事件传播机制”,揭示Qt如何优雅地处理事件流。 首先,理解Qt事件系统的基本概念至关重要。事件是程序中发生的一种情况,例如鼠标点击、键盘输入或定时器触发。在Qt中...
互联网环境下公共危机事件传播新转向的知识点涉及以下几个方面: 1. 社会转型与公共危机事件:在我国社会转型期,经济和社会快速发展的同时,各种公共危机事件频发,如自然灾害、事故灾难、公共卫生事件和社会安全...
基于回调机制的事件传播,Android,移动开发
JavaScript中的事件处理是Web开发中的核心概念,它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先,**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...
【新闻事件传播方案概述】 本方案是针对北京爱慕内衣有限公司的秋冬系列产品,旨在通过精心策划的新闻事件传播,强化爱慕品牌作为“内衣专家”的形象,并推动新品销售。传播活动将从20XX年9月8日持续到11月30日,...
《我国微博事件传播中伦理失范与规制》这篇论文探讨了在当今社会,微博作为社交媒体平台在信息传播中的重要作用,以及在这个过程中出现的伦理问题和相应的规制措施。以下是对该主题的详细阐述: 一、微博的影响力与...
爱慕,作为国内知名的内衣品牌,在2003年秋冬季推出一系列新策略,以巩固其“内衣专家”的市场地位,这一系列策略被总结为“某内衣公司系列产品新闻事件传播方案”,并得以有效实施。 首先,该传播方案的核心在于...
标题中的“2018国瓷X深外定制事件传播营销方案”揭示了这是一个关于品牌合作与教育领域营销策略的案例研究。深外(可能是深圳外国语学校)与国瓷(可能是一个瓷器品牌)进行了一次定制事件,目的是通过创新的营销...
spring发布和接收定制事件(这个上传必须要填资源分啦),ApplicationContext基于Observer模式(java.util包中有对应实现),提供了针对Bean的事件传 播功能。通过Application. publishEvent方法,我们可以将事件...
首先,网络事件传播的迅速性得益于网络技术的不断发展。从互联网诞生之初的Web1.0时代,信息传播呈现出单向性的特征,那时的网络更像是一个静态的信息展示平台。随着时间的推移,Web2.0时代的到来让用户生成内容成为...
2018国瓷X深外定制事件传播营销方案【教育】【品牌合作】.pptx
了解事件传播机制对于编写高效的事件处理程序非常重要,因为它允许开发者选择在何时何地处理事件,从而避免不必要的计算和优化性能。例如,可以利用事件捕获来在早期阶段阻止事件的进一步传播,或者利用冒泡阶段来...
在JavaScript中,事件传播是DOM元素之间的一种交互方式,它分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件传播模型允许事件从最深的节点(事件目标)向上冒泡到最外层的节点(文档)。在这个过程中,每个节点都...
### 基于蚁群算法的社会网络热点事件传播仿真研究 #### 摘要与背景 随着社交媒体平台的迅速发展,热点事件的传播已经成为社会网络分析的重要组成部分。本研究聚焦于宏观层面,探讨如何利用改进的蚁群算法来优化...
总结来说,基于文档对象的事件传播与应用一文详细介绍了在Web开发中如何处理事件,以及如何利用W3C标准中的DOM Level 2和DOM Level 3事件模型来实现跨浏览器的事件处理。文章不仅回顾了事件模型的历史发展,还分析了...
v-click-outside Vue指令可对元素外部的单击做出React,而不会停止事件传播。 v-click-outside Vue指令之间的菜单非常适合关闭对话框,可在不停止事件传播的情况下对元素外部的单击做出React。 非常适合用于关闭对话...
`ChannelPipeline` 的事件传播机制基于这些处理器链。当一个事件(如连接建立、数据接收等)发生时,它会从头节点开始沿着链路向下传递,每个处理器有机会处理事件或将其传递给下一个处理器。这种模式允许灵活地组合...
可以通过`addEventListener`的第三个参数来选择事件传播模式。 此外,还有一些高级事件特性值得了解: - `event.preventDefault()`:阻止事件的默认行为,但不阻止事件继续传播。 - `event.stopPropagation()`:...