面试题：浏览器事件冒泡、事件捕获

昨天面试问到这个问题，不是回答不上来，而是面试官问我哪个浏览器不支持事件捕获/冒泡。确实忘了，回来记忆，顺便把一些和事件流有关的内容再梳理一遍。

事件冒泡：
从事件源朝父级一直到根元素（HTML）。当某个元素的某类型事件被触发时，那么它的父元素同类型的事件也会被触发，一直触发到根源上；
从具体的元素到不确定的元素。

事件捕获：
从根元素（HTML）到事件源，当某个元素的某类型事件被触发时，先触发根元素的同类型事件，朝子一级触发，一直触发到事件源。
从不确定的元素到具体的元素；

事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡，一共分三个阶段：捕获阶段，目标阶段，冒泡阶段。（W3C标准，当处于目标阶段时事件触发）

** 事件委托/代理**：
由冒泡事件衍生出的事件委托机制,既然事件是冒泡传递的，那可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理。就是将子元素的事件处理程序绑定到父类上，例如常见的ul>li> a列表标签的写法应用。

在一些标准的浏览器中，如Chrome、Firefox等，支持这两种冒泡方式。而事实上，准确的说，是这两种方式的混合方式。因为W3C采取的就是这两种方式的结合：先从顶级节点开始，将事件向下传递至源节点，再从源节点冒泡至顶节点。

而在IE及Opera（以下说的都是老版本的欧朋，新版本的欧朋经检测是支持事件捕获的）下，是不支持事件捕获的。而这个特点最明显体现在事件绑定函数上。

IE、Opera的事件绑定函数是attachEvent，而Chrome等浏览器则是addEventListener，而后者比前者的参数多了一个——这个参数是一个布尔值，这个布尔值由用户决定，用户若设为true，则该绑定事件以事件捕获的形式参与，若为false则以事件冒泡的形式参与。

阻止冒泡

div.addEventListener("click',function(e){
	e.stopPropagation();
},true)
// 这样div的父元素就接收不到事件了

stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。

无论事件流中只有捕获还是事件流中只有冒泡，还是说是事件流中既有捕获还有冒泡，event.stopPropagation()都可以阻止事件流的传播顺序。只要是event.stopPropagation()加在哪里，则到哪里就停止运行，停止捕获或者停止冒泡，简单说是，仍然按照正常的混合机制流程走，只是哪里有e.stopPropagation()则这个流程到哪里就停止了。

stopImmediatePropagation： 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理（对当前节点第二次绑定事件时，不监听）
stopPropagation：防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理

        e=e||window.event;
        if(e.stopPropagation){
            e.stopPropagation();//其它浏览器
        }else{
            e.cancelBubble=true;//IE浏览器
        }

可以使用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获,那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生(从而需要设置取消默认)。

阻止默认事件

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

 e.preventDefault();