`
zsjg13
  • 浏览: 142466 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

事件传播

 
阅读更多

    当事件的目标是 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防止事件传播

    JavaScript防止事件传播是一种常见的前端开发技术,用于控制事件在DOM(文档对象模型)层次中的传播方式。事件传播包括三个阶段:捕获阶段、目标阶段和冒泡阶段。了解这三个阶段对于掌握如何阻止事件传播至关重要。 ...

    基于微博的事件传播分析

    由于提供的【部分内容】实际上是一段无意义的字符序列,不具备可解读的信息内容,我将忽略这一部分,转而针对【标题】和【描述】提供的信息,详细阐释在标题“基于微博的事件传播分析”下可以理解的知识点。...

    QT事件系统一:父子组件之间的事件传播机制

    本文将深入探讨“QT事件系统一:父子组件之间的事件传播机制”,揭示Qt如何优雅地处理事件流。 首先,理解Qt事件系统的基本概念至关重要。事件是程序中发生的一种情况,例如鼠标点击、键盘输入或定时器触发。在Qt中...

    互联网环境下公共危机事件传播新转向.pdf

    互联网环境下公共危机事件传播新转向的知识点涉及以下几个方面: 1. 社会转型与公共危机事件:在我国社会转型期,经济和社会快速发展的同时,各种公共危机事件频发,如自然灾害、事故灾难、公共卫生事件和社会安全...

    基于回调机制的事件传播

    基于回调机制的事件传播,Android,移动开发

    JS传播事件、取消事件默认行为、阻止事件传播详解

    JavaScript中的事件处理是Web开发中的核心概念,它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先,**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...

    某内衣公司系列产品新闻事件传播方案.docx

    【标题】:“某内衣公司系列产品新闻事件传播方案” 【描述】:该文档是关于某内衣公司,特别是爱慕品牌在2003年秋冬季节的产品新闻事件传播策略,旨在强化品牌形象,传播“内衣专家”的概念。 【标签】:“技术”...

    某内衣公司系列产品新闻事件传播方案.doc

    【新闻事件传播方案概述】 本方案是针对北京爱慕内衣有限公司的秋冬系列产品,旨在通过精心策划的新闻事件传播,强化爱慕品牌作为“内衣专家”的形象,并推动新品销售。传播活动将从20XX年9月8日持续到11月30日,...

    我国微博事件传播中伦理失范与规制-论文.zip

    《我国微博事件传播中伦理失范与规制》这篇论文探讨了在当今社会,微博作为社交媒体平台在信息传播中的重要作用,以及在这个过程中出现的伦理问题和相应的规制措施。以下是对该主题的详细阐述: 一、微博的影响力与...

    2018国瓷X深外定制事件传播营销方案【教育】【品牌合作】.rar

    标题中的“2018国瓷X深外定制事件传播营销方案”揭示了这是一个关于品牌合作与教育领域营销策略的案例研究。深外(可能是深圳外国语学校)与国瓷(可能是一个瓷器品牌)进行了一次定制事件,目的是通过创新的营销...

    spring事件传播

    spring发布和接收定制事件(这个上传必须要填资源分啦),ApplicationContext基于Observer模式(java.util包中有对应实现),提供了针对Bean的事件传 播功能。通过Application. publishEvent方法,我们可以将事件...

    2018国瓷X深外定制事件传播营销方案【教育】【品牌合作】.pptx

    2018国瓷X深外定制事件传播营销方案【教育】【品牌合作】.pptx

    js 事件的传播机制(实例讲解)

    了解事件传播机制对于编写高效的事件处理程序非常重要,因为它允许开发者选择在何时何地处理事件,从而避免不必要的计算和优化性能。例如,可以利用事件捕获来在早期阶段阻止事件的进一步传播,或者利用冒泡阶段来...

    JavaScript中使用stopPropagation函数停止事件传播例子

    在JavaScript中,事件传播是DOM元素之间的一种交互方式,它分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件传播模型允许事件从最深的节点(事件目标)向上冒泡到最外层的节点(文档)。在这个过程中,每个节点都...

    基于蚁群算法的社会网络热点事件传播仿真研究

    ### 基于蚁群算法的社会网络热点事件传播仿真研究 #### 摘要与背景 随着社交媒体平台的迅速发展,热点事件的传播已经成为社会网络分析的重要组成部分。本研究聚焦于宏观层面,探讨如何利用改进的蚁群算法来优化...

    基于文档对象的事件传播与应用 (2004年)

    总结来说,基于文档对象的事件传播与应用一文详细介绍了在Web开发中如何处理事件,以及如何利用W3C标准中的DOM Level 2和DOM Level 3事件模型来实现跨浏览器的事件处理。文章不仅回顾了事件模型的历史发展,还分析了...

    v-click-outside-Vue指令,对元素外部的单击做出React,而不会停止事件传播。-Vue.js开发

    v-click-outside Vue指令可对元素外部的单击做出React,而不会停止事件传播。 v-click-outside Vue指令之间的菜单非常适合关闭对话框,可在不停止事件传播的情况下对元素外部的单击做出React。 非常适合用于关闭对话...

    Netty4事件处理传播机制,java高级开发工程师要求(csdn)————程序.pdf

    `ChannelPipeline` 的事件传播机制基于这些处理器链。当一个事件(如连接建立、数据接收等)发生时,它会从头节点开始沿着链路向下传递,每个处理器有机会处理事件或将其传递给下一个处理器。这种模式允许灵活地组合...

    javascript之事件及事件响应篇

    可以通过`addEventListener`的第三个参数来选择事件传播模式。 此外,还有一些高级事件特性值得了解: - `event.preventDefault()`:阻止事件的默认行为,但不阻止事件继续传播。 - `event.stopPropagation()`:...

    js事件监听机制(事件捕获)总结

    事件监听涉及的几个核心概念包括事件传播的两种方式:事件捕获和事件冒泡,以及兼容性问题和事件对象的使用。 首先,事件监听器可以通过多种方法添加,包括直接在HTML元素上使用内联属性如onclick,或通过...

Global site tag (gtag.js) - Google Analytics