javascript的核心就在于事件处理。我们经常会对一个对象进行事件绑定,加上事件处理函数。如果一个元素和它的一个上级节点对于同一个事件都有进行事件处理,哪一个先触发呢?毫无疑问,这决定于浏览器。
假设一个元素element1,它有一个下级元素element2。
如图:
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
| |
-----------------------------------
这两个元素都绑定了click事件,如果用户点击了element2,它在element1和element2上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
两种模型
以前,Netscape和Microsoft是不同的实现方式。
Netscape中,element1先触发,这就叫做事件捕获。
Microsoft中,element2先触发,这就叫做事件冒泡。
两种事件处理顺序刚好相反。Explorer只支持事件冒泡,Mozilla, Opera 7 和
Konqueror两种都支持,旧版本的Opera’s 和 iCab两种都不支持 。
事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即element1先触发,element2后触发。如图:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 / | |
| ------------------------- |
| 事件捕获 |
-----------------------------------
事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即element2先触发,element1后触发。如图:
/
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| 事件冒泡 |
-----------------------------------
W3C模型
W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。
| | /
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 / | | | |
| -------------------------------- |
| W3C 模型 |
------------------------------------------
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
比如:
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
这样绑定,点击element2后
- 从顶到底进行事件捕获,碰到了element1这个采用了事件捕获的元素,则doSomething2函数执行。
- 到达事件源元素element2后,从底到顶进行事件冒泡,碰到了element2这个采用了事件冒泡的元素,则doSomething函数执行。
比如:
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
这样绑定,点击element2后
- 从顶到底进行事件捕获,没有碰到任何采用事件捕获的元素。
- 到达事件源元素element2后,从底到顶进行事件冒泡,先碰到了element2这个采用了事件冒泡的元素,则doSomething函数执行,再碰到了element1这个采用了事件冒泡的元素,则doSomething2函数执行
与传统绑定事件方式的兼容
在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。
element1.onclick = doSomething2
IE浏览器
如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。
element1.attachEvent("onclick", doSomething2);
element2.attachEvent("onclick", doSomething);
都是事件冒泡,因此,这样绑定后,点击element2后,没有事件捕获,从底到顶进行事件冒泡,先执行doSomething,再执行doSomething2
分享到:
相关推荐
传统事件捕获和冒泡的流程解析
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的...
事件冒泡、事件捕获和事件委托 在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,...
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
本文主要介绍了JS中绑定事件顺序(事件冒泡与事件捕获区别)。具有很好的参考价值,下面跟着小编一起来看下吧
主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
1、冒泡事件: 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是,就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div...
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...
本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下。...点击事件捕获冒泡实验</title> </head> <body> <div i
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的...和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> ...
主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
事件冒泡:即是事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。当事件到达目标节点之后,会沿着捕获阶段的路线原路返回,同样所有经过节点会被触发。即是自内而外,从叶到根,从小到大。 说...
想要了解什么是事件捕获与冒泡,需要先了解什么是事件。 什么是事件? 我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
Javascript事件流(事件捕获、事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...
事件冒泡及捕获的文档及示例代码,例子写得比较简单,请结合文档来看。
事件冒泡原理 从下至上 从最里面元素事件冒泡到最外层父级元素上 大哥 二哥 三弟 var a = document.getElementsByClassName('a')[0] var b = document.getElementsByClassName('b')[0] var c = document....