JavaScript事件传播机制

事件的默认传播机制有三种：事件捕获，目标阶段及冒泡阶段

1、事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

2、目标阶段：事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作，那么事件到此就结束了。

3、事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

举个简单例子：

可以清晰看到，当点击红色部分时控制台打印顺序依次为center，inner，outer。
在冒泡型事件流中click事件传播顺序为div=>body=>html=>document。
在捕获型事件流中click事件传播顺序为document=>html=>body=>div。

现在再来介绍下阻止冒泡的方法：
js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

对于阻止事件冒泡与捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。stopPropagation作为事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。取消默认行为需要用到以下方法。

取消默认事件的方法：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false；
preventDefault作为事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮input等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

如您在阅读中发现什么问题，欢迎指正。