事件流:描述页面接收事件的顺序。
事件冒泡;事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
事件捕获:事件从不太具体的节点开始触发,然后逐级向下传播到到最具体的元素。
DOM0事件流:在冒泡阶段被处理。
DOM2事件流:包括三个阶段,按照发生顺序的角度来说分别是事件捕获阶段、处于目标阶段和事件冒泡阶段。添加事件的方法是addEventListener(event,fn,useCapture);userCapture是布尔值,true为在捕获阶段执行事件,false为在冒泡阶段执行事件。
例一:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM2</title> <style type="text/css"> #father{100px;height:100px;padding:50px;background:#000;} #child{100px;height:100px;background:#fff;} </style> <script type="text/javascript"> window.onload=function(){ var oFather=document.getElementById('father'); var oChild=document.getElementById('child'); //捕获阶段执行事件 oFather.addEventListener('click',function(){ this.style.backgroundColor="red"; alert('父元素被点击') },true); oChild.addEventListener('click',function(ev){ alert('子元素被点击'); },true); oChild.addEventListener('click',function(ev){ alert('我是子元素被点击'); },true); //冒泡阶段执行事件 oFather.addEventListener('click',function(){ this.style.backgroundColor="red"; alert('父元素被点击') },false); oChild.addEventListener('click',function(ev){ alert('子元素被点击'); },false); oChild.addEventListener('click',function(ev){ alert('我是子元素被点击'); },false); } </script> </head> <body> <div id="father"> <div id="child"></div> </div> </body> </html>
IE事件处理程序:IE不支持DOM2事件流,以自己独特的方法:attachEvent()来实现事件处理。并且只在冒泡阶段被执行。
例二:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM2</title> <style type="text/css"> #father{100px;height:100px;padding:50px;background:#000;} #child{100px;height:100px;background:#fff;} </style> <script type="text/javascript"> window.onload=function(){ var oFather=document.getElementById('father'); var oChild=document.getElementById('child'); oChild.attachEvent('onclick',function(){ alert('子元素被点击') }); oChild.attachEvent('onclick',function(){ alert('我是子元素被点击') }); oFather.attachEvent('onclick',function(){ alert('父元素被点击') }); } </script> </head> <body> <div id="father"> <div id="child"></div> </div> </body> </html>
注意:为同一个元素添加两个不同的时间处理程序,IE和DOM的方法不同,IE以添加顺序的相反顺序来执行,而DOM是按照添加顺序来执行的。
声明:IE9开始已经逐步支持DOM2事件流,所以,上述IE全部是指IE9之前的浏览器。