跨浏览器的事件处理程序（1）
标签：
JavaScript
链接这里[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点击查看更多内容
1人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦