快捷導(dǎo)航

javascript事件的傳播基礎(chǔ)實(shí)例講解(35)

更新時(shí)間：2017年02月14日 16:25:57 作者：厚積薄發(fā)2017

這篇文章主要為大家詳細(xì)介紹了javascript事件的傳播基礎(chǔ)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js事件的傳播，供大家參考，具體內(nèi)容如下

<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(){ 
     
    /* 
     * 事件的傳播 
     * - 關(guān)于事件的傳播微軟和網(wǎng)景公司有著不同的理解 
     * - 微軟公司，認(rèn)為事件應(yīng)該是從后代元素向祖先元素傳播，即從里向外傳播，也就是我們所謂事件的冒泡 
     * - 網(wǎng)景公司，認(rèn)為事件應(yīng)該是從祖先元素向后代元素傳播，即從外向里傳播，這一階段我們稱為事件的捕獲 
     * - W3C綜合了兩個(gè)公司的方案,將事件的傳播分成了三個(gè)階段 
     *  1.捕獲階段 
     *   - 事件從最外層的元素（document），向目標(biāo)元素進(jìn)行事件的捕獲 
     *   - 此階段默認(rèn)不會(huì)觸發(fā)事件 
     *  2.目標(biāo)階段 
     *   - 目標(biāo)指的是觸發(fā)事件的元素，捕獲到目標(biāo)元素則捕獲階段停止 
     *  3.冒泡階段 
     *   - 事件從目標(biāo)元素向祖先元素中冒泡，此時(shí)開(kāi)始觸發(fā)事件 
     *   - 默認(rèn)事件都是在冒泡階段執(zhí)行的 
     * 
     * - 事件都是默認(rèn)在冒泡階段執(zhí)行的，一般不需要在捕獲階段觸發(fā)事件， 
     *  如果希望在捕獲階段執(zhí)行事件，則需要將addEventListener()的第三個(gè)參數(shù)修改為true 
     * 
     * - IE8及以下的瀏覽器沒(méi)有捕獲階段，也不能設(shè)置在捕獲階段觸發(fā)事件 
     */ 
     
    //分別為三個(gè)div綁定單擊響應(yīng)函數(shù) 
    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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: