DOM事件模型

在0級DOM事件模型中,它只是簡單的執(zhí)行你為它綁定的事件,比如你為某個元素添加了一個onclick事件,當事件觸發(fā)時,它只是去調用我們綁定的那個方法,不再做其他的操作。

在2級DOM事件模型中,就比較復雜一些,它將不再是單純的調用一下自身綁定的事件就完事了,它還擁有機會去處理它的祖先節(jié)點,在DOM2級事件模型中,它有一個事件傳播過程,分為3個階段,從“事件捕獲”Document開始來到“目標節(jié)點”再從“目標節(jié)點”冒泡回Document對象,舉段代碼

  <div id="div">
    <a href="javascript:;">DOM事件模型</a>
  </div>
  <script>
    var div = document.getElementById("div");    var a = div.children[0];    document.onclick = function(){      console.log("document");
    };
    a.onclick = function(){      console.log("a");
    };
    div.onclick = function(){      console.log("div");
    };  </script>

Android培訓,安卓培訓,手機開發(fā)培訓,移動開發(fā)培訓,云培訓培訓

可以看到我只是點擊了a元素,但是div和document綁定的事件也被觸發(fā)了,這就是DOM2級和1級的區(qū)別,同時你也看到,它是先輸出的a,而不是div和document,雖然說它有3個階段,但瀏覽器默認是在冒泡階段才執(zhí)行的,如果不這樣的話,我們點擊a元素就會執(zhí)行多次啦。

如果你想讓瀏覽器在捕獲階段執(zhí)行,那么就不能直接使用onclick添加事件了,而是要使用addEventListener添加事件,它的第三個參數(shù)就是用來設置在哪個階段執(zhí)行,具體可以看 

延伸閱讀

學習是年輕人改變自己的最好方式-Java培訓,做最負責任的教育,學習改變命運,軟件學習,再就業(yè),大學生如何就業(yè),幫大學生找到好工作,lphotoshop培訓,電腦培訓,電腦維修培訓,移動軟件開發(fā)培訓,網(wǎng)站設計培訓,網(wǎng)站建設培訓學習是年輕人改變自己的最好方式