MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”。
在基于W3C标准的浏览器中,事件传播首先是从最外层的元素传播到最内层的目标元素(这称为事件的“捕获”阶段),然后事件的传播讲反转方向,从最内层的元素在冒泡到最外层的元素。
回顾addEventListener()方法和removeEventListener()方法,
targetElemen.addEventListener(type,listener,useCapture);
targetElemen.removeEventListener(type,listener,useCapture);
参数useCapture=false,则将事件传播的冒泡阶段绑定事件,否则use=true,则将事件传播的捕获阶段绑定事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BodyTest</title> </head> <body> <div id ="div1"> <div id="div2"> I am inside a div. </div> </div> <script type="text/javascript"> var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.addEventListener("click",eventHandle1,true); div1.addEventListener("click",eventHandle3,false); div2.addEventListener("click",eventHandle4,true); div2.addEventListener("click",eventHandle2,false); function eventHandle1(){alert("1");} function eventHandle2(){alert("2");} function eventHandle3(){alert("3");} function eventHandle4(){alert("4");} </script> </body> </html>
输出顺序:1423