事件有三个阶段: 1.事件捕获阶段 :从外向内 2.事件目标阶段 :最开始选择的那个 3.事件冒泡阶段 : 从里向外
多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了 从里到外 事件捕获:从外往里.
绑定事件: addEventListener(事件类型,事件函数,true);
效果图 代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> #dv1{ width: 300px; height: 200px; background-color: red; } #dv2{ width: 250px; height: 150px; background-color: green; } #dv3{ width: 200px; height: 100px; background-color: blue; } </style> </head> <body> <div id="dv1"> <!-- red --> <div id="dv2"> <!-- green --> <div id="dv3"></div> <!-- blue --> </div> </div> <script src="common1.js"></script> <script> mFun$("dv3").onclick = function(){ console.log(this.id); } mFun$("dv2").onclick = function(){ console.log(this.id); //阻止事件冒泡 IE 谷歌支持 火狐不支持 //window.event.cancelBubble = true; } mFun$("dv1").onclick = function(e){ console.log(this.id); console.log(arguments.length);//1 console.log(arguments[0]);//对象 e.stopPropagation(); } document.body.onclick = function(){ console.log("小将将"); } </script> </body> </html>为元素绑定事件
addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的) 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡 window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持 window.event就是一个对象,是IE中的标准
window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
addEventListener中第三个参数是控制事件阶段的
通过e.eventPhase这个属性可以知道当前的事件是什么阶段 你的 如果这个属性的值是:
1---->捕获阶段2---->目标阶段3---->冒泡一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外 捕获阶段:从外向内效果图 代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> #dv1 { width: 300px; height: 200px; background-color: red; } #dv2 { width: 250px; height: 150px; background-color: green; } #dv3 { width: 200px; height: 100px; background-color: blue; } </style> </head> <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script src="common1.js"></script> <script> var arr = [mFun$("dv1"),mFun$("dv2"),mFun$("dv3")]; arr.forEach(function(element){ element.addEventListener("click",function(a){ console.log(this.id+","+a.eventPhase); },false); }); </script> </body> </html>