本文實例為大家分享了js事件的傳播，供大家參考，具體內容如下
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 300px; background-color: deepskyblue; } #box2{ width: 200px; height: 200px; background-color: cadetblue; } #box3{ width: 100px; height: 100px; background-color: chocolate; } </style> <script type="text/javascript"> function bind(obj , eventStr , callback){ if(obj.addEventListener){ //如果是正常瀏覽器 obj.addEventListener(eventStr , callback , false); }else{ //IE8 obj.attachEvent("on"+eventStr , function(){ callback.call(obj); }); } } window.onload = function(){ /* * 事件的傳播 * - 關于事件的傳播微軟和網景公司有著不同的理解 * - 微軟公司，認為事件應該是從后代元素向祖先元素傳播，即從里向外傳播，也就是我們所謂事件的冒泡 * - 網景公司，認為事件應該是從祖先元素向后代元素傳播，即從外向里傳播，這一階段我們稱為事件的捕獲 * - W3C綜合了兩個公司的方案,將事件的傳播分成了三個階段 * 1.捕獲階段 * - 事件從最外層的元素（document），向目標元素進行事件的捕獲 * - 此階段默認不會觸發事件 * 2.目標階段 * - 目標指的是觸發事件的元素，捕獲到目標元素則捕獲階段停止 * 3.冒泡階段 * - 事件從目標元素向祖先元素中冒泡，此時開始觸發事件 * - 默認事件都是在冒泡階段執行的 * * - 事件都是默認在冒泡階段執行的，一般不需要在捕獲階段觸發事件， * 如果希望在捕獲階段執行事件，則需要將addEventListener()的第三個參數修改為true * * - IE8及以下的瀏覽器沒有捕獲階段，也不能設置在捕獲階段觸發事件 */ //分別為三個div綁定單擊響應函數 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); bind(box1,"click",function(){ alert(1); }) bind(box2,"click",function(){ alert(2); }) bind(box3,"click",function(){ alert(3); }) }; </script> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html> 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
