小历史：
事件传播的不同还要从早先的两家浏览器巨头说起，网景和IE为了能争夺市场，互相使用相反的技术，当网景使用事件捕获流的时候，IE则使用事件冒泡流。后来W3C为了能规范规定，直接折中，当事件发生时，先发生向下传播，当到底了以后再次使用事件冒泡，逐渐的冒泡到根节点。
事件传播分三个阶段：
DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
- 在事件捕获阶段，事件从document对象沿着文档树向下传播给目标节点。如果目标的任何一个祖先注册了捕捉事件句柄，那么在事件传播的过程中，就会运行这些句柄（IE10及以下不支持捕获型事件）。
- 目标阶段发生在目标节点自身，这与0级事件模型提供的事件处理方法类似。
-
事件冒泡阶段，在这个阶段，事件将从目标元素向上传播回(像冒泡)Document对象的文档层次（IE8 及以下没有捕获阶段）。
事件传播示意图
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一跟引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆，试想一下，如果引线不导火了，那鞭炮就只有一响了！！！
dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
事件监听
与这两个事件密切相关的是addEventListener、attachEvent：
addEventListener(event, listener, useCapture)
参数定义：
event---（事件名称，如click，不带on）
listener---事件监听函数
useCapture---是否采用事件捕获进行事件捕捉，默认为false，即采用事件冒泡方式
addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。
attachEvent(event,listener)
参数定义：
event---（事件名称，如onclick，带on）
listener---事件监听函数。
attachEvent主要用于IE浏览器，并且仅在IE10及以下才支持，IE11已经不在使用这个方法。
阻止事件冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
evt.stopPropagation();
evt.cancelBubble = true;
在处理浏览器兼容问题时，可以这样：
if(evt.stopPropagation){
evt.stopPropagation();
}else{
evt.cancelBubble = true;
}
还有一种以阻止默认事件的方式去阻止冒泡行为
return false
区别
-
event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为 -
return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为 -
event.preventDefault();
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为
————愿你在迷茫时，坚信你的珍贵，爱你所爱，行你所行，听从你心，无问西东。
网友评论