js事件冒泡和阻止事件冒泡
阿新 • • 發佈：2018-11-01
1,什麼是事件冒泡
有層級關係的一連串的盒子都添加了事件,觸發子盒子的事件是,該子盒子的父級及以上的元素的事件也會被觸發;
如下面的程式碼,當我們點選子盒子dv3時,父盒子dv2,dv1的點選事件也會被觸發,這就是事件冒泡
<head> <meta charset="UTF-8"> <title>事件冒泡</title> <style> #dv1{ width: 500px; height: 500px; background-color: #FF0000; } #dv2{ width: 400px; height: 400px; background-color: lightblue; } #dv3{ width: 300px; height: 300px; background-color: antiquewhite; } </style> </head> <body> <div id="dv1"> <div id="dv2" > <div id="dv3"></div> </div> </div> <script src="public.js"></script> <script> //什麼是事件冒泡 // 給3個div都新增事件 my$('dv1').onclick = function(){ alert("div1事件觸發"); }; my$('dv2').onclick = function(){ alert("div2事件觸發"); }; my$('dv3').onclick = function(){ alert("div3事件觸發"); }; // 當點選子集元素 觸發點選事件時候,父級元素的點選事件也會被觸發,這就是 事件冒泡 </script> </body>
2,阻止事件冒泡
阻止事件冒泡有兩種方式
1,在要要觸發的點選事件函式中 寫 window.event.cancelBubble = true 這種方法 IE 和谷歌 支援,而火狐不支援
2,在事件處理函式中傳入一個物件引數, 在函式中新增 物件引數.stopPropagation;
<style> #dv1{ width: 500px; height: 500px; background-color: #FF0000; } #dv2{ width: 400px; height: 400px; background-color: lightblue; } #dv3{ width: 300px; height: 300px; background-color: antiquewhite; } </style> </head> <body> <div id="dv1"> <div id="dv2" > <div id="dv3"></div> </div> </div> <script src="public.js"></script> <script> my$('dv1').onclick = function(){ console.log("這是div1"); }; my$('dv2').onclick = function(){ console.log("這是div2"); }; //第一種方法; // my$('dv3').onclick = function(){ // console.log("這是div3"); // window.event.cancelBubble = true; // ie 和 谷歌支援 // //新增阻止事件冒泡後 點選子盒子 父級盒子的事件不會被觸發 // }; //第二種方法 my$('dv3').onclick = function(e){ console.log("這是div3"); e.stopPropagation();// 火狐和谷歌支援 ie不支援 }; </script>
3事件的三階段
事件捕獲階段
目標階段
事件冒泡階段
在事件處理函式中傳入一個物件引數, 物件引數.eventPhase 屬性可以判斷事件處於哪個階段 該值為1 則是 事件捕獲階段
2 為目標階段 3位事件冒泡階段, 在addEventListener()方法中 第三個引數可以控制事件的階段,false設定物件為冒泡階段, true設定物件為為捕獲階段
<body> <div id="dv1"> <div id="dv2" > <div id="dv3"></div> </div> </div> <script> /* * * * 事件有三個階段: * 1,事件捕獲階段: 由外到內 * 2,事件目標階段: 最開始選擇的那個 * 3,事冒泡階段: 由內到外 * * * 事件物件.eventPhase屬性可以檢視事件觸發是所處的階段 * 它會返回屬性值 * 1---捕獲階段 * 2---目標階段 * 3---事件冒泡階段 * * addEventListener("事件型別",事件處理函式,控制事件的階段) * * 控制事件的階段有兩個引數值 * false---由內到外 * true---由外到內 * * * window.event和引數e都是事件處理引數 * * */ </script> <script src="public.js"></script> <script> var arr = [my$('dv1'),my$('dv2'),my$('dv3')]; for(var i = 0; i < arr.length; i++){ var obj = arr[i]; obj.addEventListener("click",function (e) { console.log(this.id + '=====' + e.eventPhase) },false) } </script>