链接这里[http://www.cnblogs.com/yiyistar/p/6497537.html][1]
提起事件，第一个要提及的就是这个事件流，举个例子

　　点击我

自己下去实验一下，就会发现，页面弹出了三次，我只是在这个a标签上面点击了一下，就冒泡到了div层，body层。
这个就是事件的冒泡机制，先从最具体的元素开始，一层一层往上
事件捕获就是反过来的，从最大的范围开始，一直捕获到最具体的元素。

　　

　　　　点击我
　　

这里我们不推荐html事件处理函数，所以上面的函数，兼容了DOM0级，DOM2级，IE。

function removeHandler(elem, type, fn) {
　　if (elem.addEventListener) {
　　　　elem.removeEventListener(type, fn, false)
　　} else if (elem.attachEvent) {
　　　　elem.detachEvent("on" + type, fn)
　　} else {
　　　　elem["on" + type] = null
　　}
}

这个是对应的用来取消事件的函数

        点击我
    
    

最后打印出什么，body, box aa aa2 box2 body2
事件流包括了三个阶段，事件捕获，处理事件，事件冒泡。
第一步，事件捕获阶段，点击了a标签，首先从body开始触发

document.body.addEventListener("click",function(){
　　alert("body")
},true)

这个表示，我在捕获阶段就触发事件，所以，弹出body
第二步，事件进一步捕获，传到box

box.addEventListener("click",function(){
　　alert("box")
},true)

同理，在捕获阶段触发事件，弹出box
第三步，继续事件捕获，传到a，这个时候的a已经到底部了。事件捕获已经结束了。开始处理事件了

aa.addEventListener("click",function(){
　　alert("aa")
})
a.onclick=function(){
　　alert(aa2)
}

我们给a标签定义了两个事件处理函数，那么到底是先弹出aa，还是aa2呢？
这里面我们弹出的顺序是aa aa2,这是因为我们把aa写在前面，aa2写在后面而已　　

aa.onclick=function(){
　　alert(aa2)
}
aa.addEventListener("click",function(){
　　alert("aa")
})　　
```　

这样子就是aa2,aa的顺序了 第四步：事件向上冒泡，冒泡到box

box.onclick=function(){
　　alert("box2")
}

第五步：继续冒泡，冒泡到body
box.onclick=function(){
　　alert("box2")
}

我们工作中不会这样变态的例子，这只是便于我们弄懂而已

  [1]: http://www.cnblogs.com/yiyistar/p/6497537.html