下次自动登录
现在的位置:
& 综合 & 正文
解析：浏览器事件冒泡及事件捕获
今天的效率有点奇葩，说高吧，一个上午做了不少事。说低吧，因为一个分布式的花了我不少时间，终于有点头绪。估计明天会写一篇文章来讲述一下自己的看法。
而今天，还是回到前端。今天来说说事件冒泡和事件捕获。首先肯定是概念：什么是事件冒泡？什么是事件捕获？
简单地说，事件冒泡和事件捕获都是一种事件传递的机制。这种机制可以使事件在不同级的元素间传递。事件冒泡是从事件触发的源节点，向父节点传递，直到到达最顶节点。而事件捕获则是从最顶节点，逐步向下传递，直到到达事件触发的源节点。
在一些标准的浏览器中，如Chrome、Firefox等，支持这两种冒泡方式。而事实上，准确的说，是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合：先从顶级节点开始，将事件向下传递至源节点，再从源节点冒泡至顶节点。
而在IE及Opera（以下说的都是老版本的欧朋，新版本的欧朋经检测是支持事件捕获的）下，是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。
IE、Opera的事件绑定函数是attachEvent，而Chrome等浏览器则是addEventListener，而后者比前者的参数多了一个——这个参数是一个布尔值，这个布尔值由用户决定，用户若设为true，则该绑定事件以事件捕获的形式参与，若为false则以事件冒泡的形势参与。而这个参数在IE和Opera浏览器中是不存在的——根本原因是它们不支持事件捕获。
下面我来提供一个例子让大家更好地理解事件冒泡和事件捕获(本来想用flex布局，后来想偷懒，所以还是算了，大家不要注意细节(*^__^*) 嘻嘻……)：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&&/title&
width: 500
height: 500
background:
line-height: 500
text-align:
width: 300
height: 300
line-height: 300
background:
text-align:
display: inline-
vertical-align:
width: 200
height: 200
background:
display: inline-
vertical-align:
&div id="ele1"&
&div id="ele2"&
&div id="ele3"&&/div&
&a id="test" href="/"&click&/a&
&script type="text/javascript"&
window.onload = function() {
var e1 = document.getElementById('ele1');
var e2 = document.getElementById('ele2');
var e3 = document.getElementById('ele3');
var link = document.getElementById('test');
e1.addEventListener('click',function(evt) {
console.log('ele1-click');
e2.addEventListener('click',function(evt) {
console.log('ele2-click');
e3.addEventListener('click',function(evt) {
console.log('ele3-click');
evt.stopPropagation();
link.addEventListener('click',function(evt) {
console.log('^_^，I have stopped it!')
evt.preventDefault();
可以留意到，我在例子中还增加了一个preventDefault的例子，因为我看到网上许多文章都把它和stopPropagation放在一起讨论，所以这里也让大家了解一下。
&&&&推荐文章:
【上篇】【下篇】事件捕获和事件冒泡什么意思？
来源：互联网
责任编辑：李平字体：
js事件冒泡与事件捕获详解事件冒泡:就是从目标对象到外层的顺序触发(如果点击C,它的触发顺序为C→B→A)DOM事件流:就是支持两种事件模型,捕获型事件和冒泡型事件,捕获型事件先发生;两种事件流...js事件冒泡与事件捕获详解B&C)事件冒泡:就是从目标对象到外层的顺序触发(如果点击C,它的触发顺序为C&B&A)DOM事件流:就是支持两种事件模型,捕获型事件和冒泡型事件,捕获型事件先...JS中绑定事件顺序(事件冒泡与事件捕获区别)冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先...彼此之间遵守事件冒泡规则,从内到外触发;on()绑定的事件,总是晚于onclick和click绑定...事件捕获和事件冒泡什么意思？(图2)事件捕获和事件冒泡什么意思？(图4)事件捕获和事件冒泡什么意思？(图6)事件捕获和事件冒泡什么意思？(图8)事件捕获和事件冒泡什么意思？(图10)事件捕获和事件冒泡什么意思？(图13) 在学前端编程里，js语法经常讲到事件捕获和事件冒泡，究竟啥意思。求详解
用户回答1:javascript事件冒泡和事件捕获详解span等),我们不必再一次循环给每一个元素绑定事件,直接修改事件代理的事件处理函数即可。冒泡还是捕获?对于事件代理来说,在事件捕获或者事件冒泡阶段处理并没有防抓取，好心游戏网提供内容，请查看原文。谢邀！！针对事件捕获和事件冒泡，我已经写了一篇文章有具体讲到《JS事件流与DOM事件处理程序》，文章链接：/i4369410/，感兴趣的可以直接去看看。js之事件冒泡和事件捕获详细介绍p先触发,这就叫做事件冒泡。两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla,Opera7和Konqueror两种都支持,旧版本的Opera's和iCab两种都不支持。事件捕获当...防抓取，好心游戏网提供内容，请查看原文。这里在简单的讲述下，事件流的相关知识。事件流DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解...比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带...事件注册顺序决定的以上内容就是本文对DOM防抓取，好心游戏网提供内容，请查看原文。事件流可以理解为事件在页面的DOM节点之间传播的顺序，主要分为三个过程，分别是：事件捕获阶段 --& 事件目标阶段 --& 事件冒泡阶段，从下图可以看出事件的传播过程。请问javascript中事件捕获和事件冒泡该怎么理解?事件捕获是为了逐层确定事件的来源,事件冒泡是为了逐级响应事件就如这哥们说的一样,事件捕获的主要目的是为了响应事件,比如你单击按钮,先事件捕获,再防抓取，好心游戏网提供内容，请查看原文。事件捕获事件捕获的思想是页面上最外层的节点先接收事件，然后向内层元素逐级传播。例如上面的例子中，事件捕获阶段的传播顺序为：window --& document --& html --& body --& table --& tbody --& tr --& tdJavaScript事件捕获与事件冒泡原理IE和DOM之间存在哪些主...p先触发,这就叫做事件冒泡。两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla,Opera7和Konqueror两种都支持,旧版本的Opera's和iCab两种都不支持。事件捕获当你...防抓取，好心游戏网提供内容，请查看原文。事件冒泡事件冒泡和事件捕获刚好相反，它的思想是让最内层节点先接收事件，然后向外层逐级传播。上面的例子中，事件冒泡阶段传播顺序为：td --& tr --& tbody --& table --& body --& html --& document --& windowJAVASCRIPT中什么是捕捉事件和冒泡事件,请通俗(用代码)举例...事件捕获是为了逐层确定事件的来源,例如:从document-html-body-div,Code:document.getElementById(&divid&)事件冒泡是为了逐级响应事件,例如:从div-body-htm...防抓取，好心游戏网提供内容，请查看原文。事件目标阶段求大神介绍js事件冒泡和捕获有什么实际的应用，最...答：比如easyui的页面组件Tabs在右键监听事件中可以设置右键单击tab页标签弹出菜单并进行处理，拦截js鼠标左键单击弹出的菜单的事件防抓取，好心游戏网提供内容，请查看原文。不管在事件传播阶段还是在事件冒泡阶段，都必然经历事件目标阶段，表示对DOM节点的事件进行处理。什么是事件的捕捉阶段和冒泡阶段答：（1）冒泡型事件：事件按照特定事件目标特定事件目标(document象)顺序触发IE5.5:div-&body-&documentIE6.0:div-&g防抓取，好心游戏网提供内容，请查看原文。目前我已经在头条发表了一百多篇关于前端开发的文章，反响还不错，可以关注下噢~什么情况用到事件冒泡和事件捕获？？JavaScript基础答：事件捕获是为了逐层确定事件的来源，例如：从document-html-body-div,Code：document.getElementB防抓取，好心游戏网提供内容，请查看原文。用户回答2:js中事件冒泡和事件捕获，以及怎么解决答：js中事件冒泡和事件捕获，以及怎么解决创建SDCard可以在Eclipse创建模拟器时随同创建，也可以使用DOS命令进行创建，如下：在Dos窗口中进入andr防抓取，好心游戏网提供内容，请查看原文。Js事件传播阶段分为jq中的addeventlistener事件句柄在捕获阶段执行和...答：点击p元素时，会触发p元素和div元素的2个事件，所以会运行两次handler，点击span，会触发div的事件，所以会运行d防抓取，好心游戏网提供内容，请查看原文。第一阶段：从window传递到目标节点称为捕获阶段单片机中的输入捕捉与输出比较是什么意思？答：输入捕捉可以用来捕获外部事件，并为其赋予时间标记以说明此事件的发生时刻。外部事件发生的触发信号由单片机中对应的引脚输入（具体可以参考单片机的datashee防抓取，好心游戏网提供内容，请查看原文。第二阶段：在目标节点触发称为目标阶段移动web怎么捕获虚拟键盘弹出和关闭事件答：当虚拟键盘弹出的时候，window的resize事件会被触发（至少我的Android手机是这样）问题里的input是使用position:fixed吗，如果防抓取，好心游戏网提供内容，请查看原文。第三阶段：从目标节点传回window对象，称为冒泡阶段js可以获取到用户点击浏览器上前进和后退键的事件...问：比如我点击浏览器的后退键时不想让它回到上一个历史记录而是显示一个对...答：不能获取，因为，浏览器上的前进后退是浏览器自带的功能，而不是页面自防抓取，好心游戏网提供内容，请查看原文。具体例子说明讲解可以点我头像查看我写的一篇文章&5分钟了解js事件机制&什么是捕获型事件和冒泡型事件？如何阻止冒泡答：不是这个意思，只不过冒泡型事件是所有浏览器都支持的，因此现在编程都用冒泡型事件netscape国外可能还有人用，国内的话也就专业人士采用它，一般用来调试程防抓取，好心游戏网提供内容，请查看原文。用户回答3:如何捕获和响应MapControl的添加图层事件答：通常地图都需要加上一个鹰眼，要实现鹰眼功能，不可避免的就需要实现主地图和鹰眼的同步。令人失望的是ArcGIS的帮助文档和范例中都采用同时在主地图和鹰防抓取，好心游戏网提供内容，请查看原文。事件捕@是拥酱钩桑皇录芭菥褪翘oh渺！防抓取，好心游戏网提供内容，请查看原文。js事件冒泡、事件捕获和阻止默认事件详解因为阻止了事件冒泡。2.事件捕获既然有事件的冒泡,也可以有事件的捕获,这是一个相...都是一样的效果,那它们有区别吗?当然有。仅仅是在HTML事件属性和DOM0级事件处...javascript事件冒泡和事件捕获详解span等),我们不必再一次循环给每一个元素绑定事件,直接修改事件代理的事件处理函数即可。冒泡还是捕获?对于事件代理来说,在事件捕获或者事件冒泡阶段处理并没有明显...js之事件冒泡和事件捕获详细介绍p先触发,这就叫做事件冒泡。两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla,Opera7和Konqueror两种都支持,旧版本的Opera's和iCab两种都不支持。事件捕获当...为您准备的好内容:
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 好心游戏网 版权所有
京ICP备号-1 京公网安备02号在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。当时的我，把它当成IE浏览器兼容问题，所以没有深究（IE8以下版本的浏览器已基本退出市场）。工作至今，虽然多次遇到该类问题，但均未深究，始终一知半解，遇到了全TM靠猜（选A不行就选B呗）。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。
先上结论：他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。
这是HTML结构
　　　　　　　　&div id="parent"&
　　　　　　　　　　&div id="child" class="child"&&/div&
　　　　　　　　&/div&
现在我们给它们绑定上事件
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发，"+this.id);
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发，"+this.id)
child事件被触发，child
parent事件被触发，parent
结论：先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。
现在改变第三个参数的值为true
　　　　　　　document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被触发，"+e.target.id);
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被触发，"+e.target.id)
parent事件被触发，parent
child事件被触发，child
结论：先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。
貌似没什么卵用，上一个利用事件冒泡的案例，反正我是经常会用到。
　　　　&ul&
&li&item1&/li&
&li&item2&/li&
&li&item3&/li&
&li&item4&/li&
&li&item5&/li&
&li&item6&/li&
需求是这样的：鼠标放到li上对应的li背景变灰。
利用事件冒泡实现：
　　　　　　　$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
也许有人会说，我们直接给所有li都绑上事件也可以啊，一点也不麻烦，只要&&
　　　　　　　$("li").on("mouseover",function(){
$(this).css("background-color","#ddd").siblings().css("background-color","white");
是，这样也行。而且从代码简洁程度上，两者是相若仿佛的。但是，前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的。
还有就是，如果我们在绑定事件完成后，页面又动态的加载了一些元素&&
$("&li&item7&/li&").appendTo("ul");
这时候，第二种方案，由于绑定事件的时候item7还不存在，所以为了效果，我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件&&
高下立判！
阅读(...) 评论()博客分类：
]
Netscape 定义了事件捕获，先是最顶级的元素（document）响应事件，然后逐层往下，最后到达最低层的元素。
IE 定义了事件冒泡，先是最底层的事件进行响应，然后逐层网上，最后到达document。注意先到达html元素，再到达document。
W3C取各家所长，定义了事件捕获和事件冒泡，当document发现有事件发生时，就进入了事件捕获阶段，等当事件被处理完毕后，就冒泡到回doucment。
DOM的addEventListener方法接受三个元素，第一个为所需要处理的事件，第二个参数为事件处理函数，
第三个参数为一个boolean，true时代表在捕获阶段进行事件处理，false代表在冒泡阶段进行事件处理。
我们一般使用false，这样就可以拥有和IE中的attachEvent()一样的作用。如果我们使用true，那么在IE8中不会被实现。
需要注意的是，类似element.onclick = function(){}等用法，假设我们使用事件冒泡阶段去处理事件。
相当多的浏览器支持事件冒泡和事件捕获，IE版本8及以前只支持事件事件冒泡
我们一般不使用如下方式，因为当我们制作大型网站时，往往有很多事件，我们就要在内存中维护很多这种dom及相应在js中定义的事件处理程序，这样就降低了运行速度
document.getElementById("help-btn").onclick = function(event){
openHelp();
document.getElementById("save-btn").onclick = function(event){
saveDocument();
document.getElementById("undo-btn").onclick = function(event){
undoChanges();
};
我们考虑使用这种方式
document.onclick = function(event){
//IE doesn't pass in the event object
event = event || window.
//IE uses srcElement as the target
var target = event.target || event.srcE
switch(target.id){
case "help-btn":
openHelp();
case "save-btn":
saveDocument();
case "undo-btn":
undoChanges();
};也就是在最高层进行事件处理，我们也可以为类似的事件使用同样的方式，比如事件mousedown, mouseup, mousemove, mouseover, mouseout, dblclick, keyup, keydown, and keypress
这里需要注意mouseout和mouseover由于他们本身的特性很难使用这种方式，因为当鼠标从一个区域移出后，它很可能被认为是从子元素移往上层元素，也就是仍然处于这个区域中，事件不会被触发
hanazawakana
浏览: 52684 次
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'事件流
JavaScript 的事件是以一种流的形式存在的，一个事件会有多个元素同时响应。有时候这不是我们想要的，我们只需要某个特定的元素响应我们的绑定事件就可以了。
事件分类
捕获型事件（非IE）、冒泡型事件（所有浏览器都支持）
捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面我用一个图来直观表示：
冒泡型事件我们在工作中可能会比较多遇到，但捕获型事件怎样才会执行到呢，如果我们想要在非 IE 浏览器中要创建捕获型事件，只需将 addEventListener 的第三个参数设为true就好了。
ID为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数，这样：
当点击#div1（蓝色区域）时，应该会alert出”div1″
当点击#div2（黄色区域）时，应该会先alert出”div1″，再alert出”div2″，因为在事件捕捉阶段，事件是从根元素向下传播的，#div1是#div2的父元素，自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
冒泡型事件例子：
01
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
02
&html xmlns="http://www.w3.org/1999/xhtml"&
03
&head&
04
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
05
&title&冒泡事件&/title&
06
&script type="text/javascript"&
07
var i = 1;
08
function Add(sText,objText)
09
{
10
&&& document.getElementById("Console").innerHTML +=sText + "执行顺序：" + i + "&br /&" + "&hr /&";
11
&&&&&&& i = i + 1;
12
&&&&&&& //window.event.cancelBubble =
13
}
14
&/script&
15
&/head&
16
17
&body onclick="Add('body事件触发&br /&','body')"&
18
&div onclick="Add('div事件触发&br /&','div')"&
19
&&& &p onclick="Add('p事件触发&br /&','p')" style="background:#c00;"&点击&/p&
20
&/div&
21
&div id="Console" style="border:solid 1px #ee0; background:#"&&/div&
22
23
&/body&
24
&/html&
从这个例子我们可以很清楚的看到事件冒泡是从目标元素 P 一直上升到 body 元素。
阻止事件冒泡
如下有一个函数兼容了 IE 和其它浏览器的阻止事件冒泡
1
function stopBubble(e) {
2
&&& //如果提供了事件对象，则这是一个非IE浏览器
3
&&& if ( e && e.stopPropagation )
4
&&&&&&& //因此它支持W3C的stopPropagation()方法
5
&&&&&&& e.stopPropagation();
6
&&& else
7
&&&&&&& //否则，我们需要使用IE的方式来取消事件冒泡
8
&&&&&&& window.event.cancelBubble =
9
}
在 IE 并没有 stopPropagation 方法，但我们可以通过 window.event.cancelBubble 来阻止事件冒泡。
监听函数
IE　: attachEvent、detachEvent
非IE: addEventListener、removeEventListener
除了上面四个函数还有一个比较通用的方法是 document.getElmentById(元素ID).onclick = function(){}
事件对象
当触发事件，在监听函数执行函数里怎样才可以获取事件对象呢？在IE 中用window.event.srcElement而在非IE浏览器则用e.currentTarget
例代码：
01
btn.onclick = ctdClickE
02
03
function ctdClickEvent(e)
04
{
05
&&& if( !-[1,] ) //IE
06
&&& {
07
&&&&&&& var readonly = "readOnly";
08
&&&&&&& var obj = window.event.srcE
09
&&& }
10
&&& else
11
&&& {
12
&&&&&&& //非IE
13
&&&&&&& var readonly = "readonly";
14
&&&&&&& var obj = e.currentT
15
&&& }
16
17
&&& var id = obj.id.replace("btn_","");
18
19
&&& if( obj.value=="此项改为不续费" )
20
&&& {
21
&&&&&&& ......&&&&
22
&&& }
23
&&& else
24
&&& {
25
&&&&&&& .......
26
&&& }
27
&&& sumPrice();
28
}
浏览: 4062 次
来自: 北京
[flash=200,200][flash=200,200][ ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'