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

浏览器事件是冒泡还是捕获

 
阅读更多

这是三种事件处理的模型

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。

 
W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段

为一个web开发者,你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的最后一个参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。

 

  • 大小: 43.5 KB
分享到:
评论

相关推荐

    CaptureIEEvent(浏览器事件捕获控件测试程序)

    CaptureIEEvent是一个用于测试浏览器事件捕获功能的控件,主要针对Internet Explorer浏览器。这个测试程序包含了一系列的类文件和用户界面元素,旨在帮助开发者理解和调试与浏览器交互时的事件处理。 1. **事件捕获...

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    这个布尔值决定事件是在冒泡阶段还是捕获阶段触发。如果第三个参数为`true`,事件将在捕获阶段执行;若为`false`(默认值),事件将在冒泡阶段执行。 阻止事件冒泡可以防止事件继续向上层元素传播。在标准的W3C...

    JS事件冒泡浏览器兼容

    一种解决兼容性问题的方法是使用DOM2级事件接口,其中`addEventListener`和`removeEventListener`方法可以接受第三个参数,用来指定事件是在捕获阶段还是冒泡阶段处理。如果该参数为`true`,则事件处理函数会在捕获...

    2022年生动详细解释javascript的冒泡和捕获.docx

    事件冒泡和捕获是两种不同的事件传播机制,它们在不同浏览器的历史发展中曾导致兼容性问题,但现在已经成为W3C标准的一部分。 **事件冒泡**(Bubbling)是指事件从最深的节点开始,然后逐级向上层节点传播事件的...

    【JavaScript源代码】基于事件冒泡、事件捕获和事件委托详解.docx

    在JavaScript中,事件处理是网页交互的核心部分,而事件冒泡、事件捕获和事件委托则是JavaScript事件模型中的三个重要概念。理解这三个概念对于优化网页性能和编写高效代码至关重要。 事件冒泡是指事件从最深的节点...

    一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    在现代浏览器中,默认情况下事件流是处于冒泡阶段。但是,在使用addEventListener方法绑定事件时,可以通过一个布尔值参数来控制事件的触发顺序。第三个参数设置为true表示采用事件捕获,设置为false(或不设置)则...

    ie事件捕获控件 捕获ie浏览器到打开链接等等的事件

    "ie事件捕获控件"是一个专门针对Internet Explorer(IE)浏览器设计的技术解决方案,它允许开发者捕获并处理浏览器的各种事件,例如打开链接、加载页面、关闭窗口等。这种技术的核心在于事件模型,它是JavaScript和...

    简析JavaScript事件、以及捕获和冒泡

    总结来说,JavaScript事件是其动态特性的核心,而事件捕获和冒泡则是理解事件处理机制的关键。通过合理利用这两种机制,开发者可以创建出更加互动和响应式的网页应用。了解并熟练运用这些知识,将有助于提升...

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    本文将深入探讨事件绑定、事件冒泡、事件捕获以及事件执行顺序这四个关键概念。 首先,事件绑定是将事件处理器(事件处理函数)与特定DOM元素关联的过程。在JavaScript中,有多种绑定事件的方法: 1. HTML内联事件...

    js冒泡、捕获事件及阻止冒泡方法详细总结

    然而,由于大多数浏览器默认使用事件冒泡,因此在例子中没有展示事件捕获的实例。 在某些情况下,我们可能希望阻止事件冒泡,以免不必要的事件处理影响其他元素或造成冲突。有以下两种主要方法可以阻止事件冒泡: ...

    判断浏览器是刷新还是关闭窗口

    `onunload` 事件是在文档或窗口即将卸载时触发的一个事件。当用户通过点击浏览器的关闭按钮或通过其他方式(如刷新页面)离开当前页面时,此事件将被触发。由于其触发时机的特殊性,`onunload` 常被用来执行一些清理...

    javascript事件冒泡和事件捕获详解

    其中,第一个参数是要绑定的事件类型,第二个参数是事件触发后要执行的函数,第三个参数是一个布尔值,用来指示该事件是在事件捕获阶段还是事件冒泡阶段调用处理函数。默认值是false,意味着默认情况下事件处理函数...

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

    在IE浏览器中,没有标准的捕获事件,只有冒泡事件处理。对于其他大多数现代浏览器,它们支持W3C标准,允许开发者在捕获阶段拦截事件。在JavaScript中,可以通过在addEventListener方法中设置第三个参数为true来指定...

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    该方法接受三个参数:事件名、处理函数和一个可选的布尔值`useCapture`,用来指定事件是在捕获阶段还是冒泡阶段触发。默认情况下,`useCapture`为`false`,表示事件将在冒泡阶段处理。如果设置为`true`,事件将在...

    js基础之事件捕获与冒泡原理

    想要了解什么是事件捕获与冒泡,需要先了解什么是事件。 什么是事件? 我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些...

    浏览器事件动态注册和取消

    - `element.addEventListener('事件类型', function() {}, false)`:这是DOM2级事件处理程序,用于添加事件监听器,第三个参数通常为布尔值,表示事件冒泡或捕获。 2. **DOM2级事件处理程序**: - `...

    Javascript事件流(事件捕获、事件冒泡),事件委托(代理)

    Javascript事件流(事件捕获、事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...

    js之事件冒泡和事件捕获详细介绍

    在实际开发中,开发者可以根据具体的业务需求来选择使用事件冒泡还是事件捕获。如果需要在父元素上预先处理事件,可能会选择事件捕获;如果需要在子元素上优先处理事件,或者页面上绑定了大量的事件处理程序,通常会...

    现代浏览器的事件发射器

    浏览器的事件模型分为三个层次:捕获阶段、目标阶段和冒泡阶段。在捕获阶段,事件从最外层节点向目标节点传递;在目标阶段,事件在目标节点上触发;最后,在冒泡阶段,事件从目标节点向上级节点传递。开发者可以选择...

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    - `useCapture`:指定事件是否在捕获或冒泡阶段执行。 #### 事件移除 与`addEventListener`对应,`removeEventListener`也具有相同的参数: ```javascript element.removeEventListener(eventName, listener, ...

Global site tag (gtag.js) - Google Analytics