事件流
提起事件，第一个要提及的就是这个事件流，举个例子
<!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层。
这个就是事件的冒泡机制，先从最具体的元素开始，一层一层往上
事件捕获就是反过来的，从最大的范围开始，一直捕获到最具体的元素。
事件处理函数
html事件处理函数
DOM0级事件处理函数
DOM2级事件处理函数
IE事件处理函数
<!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") }
我们工作中不会这样变态的例子，这只是便于我们弄懂而已
下一个章节，整理了关于事件对象的知识点，点击这里http://www.cnblogs.com/yiyistar/p/6500850.html