`
zha_zi
  • 浏览: 584786 次
  • 性别: 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
分享到:
评论

相关推荐

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

     1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...

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

    JavaScript中事件冒泡机制示例详析  DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 ... dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件

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

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

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

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

    DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心,...

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

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场)...

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

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,...

    Javascript Event(事件)的传播与冒泡

    标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性...

    javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation()...

    js点击事件的执行过程实例分析【冒泡与捕获】

    js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡。 首先看下当我们点击一个元素后,浏览器的执行过程。 1,当某个元素...

    事件高级用法及兼容写法

    isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制 注意:事件名没有on前缀 removeEventListener(事件名,事件函数,isBubble) 注意:一定要保证移除事件时和添加事件时是同一个事件函数 事件绑定兼容性问题...

    纯JavaScript实现的兼容各浏览器的添加和移除事件封装

    //事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是... //非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型

    浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。 三、阻止事件冒泡 事件冒泡机制有时候是不需要的,需

    JQurey入门——事件机制之事件中的冒泡现象示例解释

    事件被触发后被分为两个阶段,一个是捕获(Capture),另一个是冒泡(Bubbing),但大多浏览器并不是都支持捕获阶段,因此事件被触发后,往往执行冒泡过程。 2、示例代码: 代码如下:<!DOCTYPE html PUBLIC “-//W3...

    前端笔记.zip

    6、什么是事件冒泡/捕获? 事件冒泡: 事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,也就是子元素事件的触发会影响父元素的事件; 开关事件冒泡: A,开启事件冒泡:event.addEventListener...

    JavaScript每天必学之事件

    其实这篇文章挺早之前就写了,但是由于sf保存...事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒泡,所谓是事件冒泡指的是事件最开始由最具体的元素接收,然后逐级向上传播到不具体的节点。而事

    前端面试,独有前端面试题详解,前端面试刷题必备,1000+前端面试真题,Html、Css、JavaScript、Vue

    先执行冒泡还是捕获? Day384:JavaScript 中如何实现一个类?怎么实例化这个类? Day383:说下 React 的 useEffect、useCallback、useMemo Day382:说一下 setTimeout 和 setInterval 的区别,包含内存方面的分析? ...

    JavaScript 事件系统

    事件分类 捕获型事件(非IE)、冒泡型事件(所有浏览器都支持) 捕获型事件是自上而下的,而冒泡型事件是自下而上的。下面我用一个图来直观表示: 冒泡型事件我们在工作中可能会比较多遇到,但捕获型事件怎样才会执行到...

Global site tag (gtag.js) - Google Analytics