浏览器在发生一个事件时会从经过顶层到目标的捕获过程，目标到顶层的冒泡过程，不多解释，看代码理解
<html>
<head>
<style>
#outer{
width: 200px;
height: 200px;
background: #F08738;
}
#mid{
width: 150px;
height: 150px;
background: #293484;
}
#inner{
width: 100px;
height: 100px;
background: #783948;
}
#target{
width: 50px;
height: 50px;
background: #98fe99;
}
</style>
</head>
<body>
<div id="outer">
<div id="mid">
<div id="inner">
<div id="target"></div>
</div>
</div>
</div>
<script>
var o = document.getElementById('outer');
var m = document.getElementById('mid');
var i = document.getElementById('inner');
var t = document.getElementById('target');
</script>
</body>
</html>
四个div层次很清楚
下面为div绑定事件
o.addEventListener('click', function(){console.log('outer')});
m.addEventListener('click', function(){console.log('mid')});
i.addEventListener('click', function(){console.log('inner')});
t.addEventListener('click', function(){console.log('target')});
点击target的结果如下，依次输出target inner mid outer
冒泡的结果，点击target, 它父层的div的click事件也会执行
再看捕获阶段
o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid')}, true);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target')}, true);
addEventListener最后加了个参数，指明此事件在捕获阶段执行，其结果是 outer mid inner target
可以看出来从顶层到目标元素的捕获阶段
捕获，冒泡一起绑定
o.addEventListener('click', function(){console.log('outer bubble')}, false);
o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid bubble')}, false);
m.addEventListener('click', function(){console.log('mid')}, true);
i.addEventListener('click', function(){console.log('inner bubble')}, false);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target bubble')}, false);
t.addEventListener('click', function(){console.log('target')}, true);
点击target结果是
outer
mid
inner
target bubble
target
inner bubble
mid bubble
outer bubble
可以看到先是执行捕获阶段的函数，然后是冒泡阶段的函数
对于目标元素target没有捕获冒泡区分，指定冒泡阶段的函数在指定捕获阶段的函数先执行了。执行顺序不确定
相关推荐
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡：在javascript事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。并不是所有的...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
本文主要介绍了JS中绑定事件顺序（事件冒泡与事件捕获区别）。具有很好的参考价值，下面跟着小编一起来看下吧
事件冒泡、事件捕获和事件委托 在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制，我先来解释一下事件冒泡和事件捕获： 事件冒泡会从当前触发的事件目标一级一级往上传递，...
本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考，具体如下： 今天学习了事件冒泡和捕获，记录一下。...点击事件捕获冒泡实验</title> </head> <body> <div i
JavaScript中事件冒泡机制示例详析 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，...
1、冒泡事件： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div...
事件冒泡：即是事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。当事件到达目标节点之后，会沿着捕获阶段的路线原路返回，同样所有经过节点会被触发。即是自内而外，从叶到根，从小到大。 说...
主要介绍了一JS的事件冒泡和事件捕获,通过代码举例详细描述了两者之间的差别,需要的朋友可以参考下
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> ...
想要了解什么是事件捕获与冒泡，需要先了解什么是事件。 什么是事件？ 我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程； 事件捕获刚好相反，是从祖先节点到子节点的过程。 给一个...
Javascript事件流（事件捕获、事件冒泡）–>事件委托（代理） Javascript与HTML之间的交互是通过“事件”实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间，当我们与浏览器中的web页面进行特定的交互时...
本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考，具体如下： 1、事件冒泡 在一个对象上触发某类事件，如onclick事件等，在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同