js中事件是如何传播的？

小历史

事件传播的不同还要从早先的两家浏览器巨头说起，网景和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();
  它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为

————愿你在迷茫时，坚信你的珍贵，爱你所爱，行你所行，听从你心，无问西东。