跨浏览器的事件处理程序（1）-原创手记-慕课网

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
　　<a href="#" id="aa">点击我</a>
</div>
<script type="text/javascript">
　　var box=document.getElementById("box")
　　var aa=document.getElementById("aa")
　　aa.addEventListener("click",function(){
　　　　alert("点击成功")
　　})
　　box.addEventListener("click",function(){
　　　　alert("点击成功")
　　})
　　document.body.addEventListener("click",function(){
　　　　alert("点击成功")
　　})
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
　　<div id="box">
　　　　<a href="#" id="aa">点击我</a>
　　</div>
<script type="text/javascript">
　　function addHandler(elem,type,fn){
　　　　if(elem.addEventListener){
　　　　　　elem.addEventListener(type,fn,false)
　　　　}else if(elem.attachEvent){
　　　　　　elem.attachEvent("on"+type,fn)
　　　　}else{
　　　　　　elem["on"+type]=fn
　　　　}
　　}
　　var a=document.getElementById("aa")
　　addHandler(a,'click',function(){
　　alert(111)
　　})
</script>
</body> 
</html>

这里我们不推荐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
　　}
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <a href="#" id="aa">点击我</a>
    </div>
    <script type="text/javascript">
    var box=document.getElementById("box")
    var aa=document.getElementById("aa")
    aa.addEventListener("click",function(){
        alert("aa")
    })
　　　　aa.onclick=function(){
　　　　　　alert(aa2)
　　　　}

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

    document.body.onclick=function(){
        alert("body2")
    }
    document.body.addEventListener("click",function(){
        alert("body")
    },true)
    </script>
</body>
</html>

最后打印出什么，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