js之dom2級事件的示例分析

這篇文章主要介紹js之dom2級事件的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

我們使用的DOM2事件綁定，其實是讓box通過原型鏈一直找到EventTarget這個內置類原型上的addEventListener方法實現的。

DOM0級事件綁定:只能給一個元素的某一個行為綁定一次方法，第二次綁定的會把前面的覆蓋掉。

DOM2：可以給某一個元素的同一個行為綁定多個不同的方法

box.addEventListener('click',function(e){
      console.log(1)
    },false)
    box.addEventListener('click',function(e){
      console.log(2)
    },false) // 輸出1 2

DOM2：DOM0中的行為類型，我們用DOM2一樣可以綁定，而且DOM2中還提供了一些DOM0沒有的行為類型->DOMContentLoaded:當頁面中的DOM結構（HTML結構加載完成）觸發的行為

box.addEventListener('DOMContentLoaded',function(e){
      
    },false)

window.onload = function(){}

//當頁面中的所有資源都加載完成（圖片、HTML結構、音視頻...）才會執行后面的函數；并且在一個頁面中只能用一次，后面在寫會把前面的覆蓋掉；->因為他是采用DOM0事件綁定，所以只能綁定一次
    　$(document).ready(function(){})//->$(function(){})
    /*
      只要頁面中的HTML結構加載完成就會執行對應的函數；并且在同一個頁面中可以出現多次。因此這個是采用DOM2事件的綁定，綁定的行為是DOMContentLoaded
    */

DOM2級添加和移除事件細節

function fn1(e){
      console.log(this);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    //移除事件
    box.removeEventListener('click',fn1,false);

注意:移除的時候需要保證三個參數:行為、方法、哪個階段發生的   三個參數必須一致 ->DOM2在綁定的時候，我們一般都給他綁定的是實名函數

只能給某個元素的同一個行為綁定多個“不同”的方法（如果方法相同了，只能留一個）

當行為觸發，會按照綁定的先后順序依次把綁定的方法執行；執行的this是當前被綁定事件的元素本身

function fn1(){
      console.log(1);
    }
    //添加事件
    box.addEventListener('click',fn1,false);
    box.addEventListener('click',fn1,false);//只輸出一個1

上面涉及一個概念:事件池(用來存儲當前元素行為綁定的方法的，瀏覽器自帶的機制) 如下圖所示

 但是在IE6-8瀏覽器中,不支持addEventListener,如果想實現DOM2事件綁定只能用attachEvent/detachEvent

它只有兩個參數，不能像addEventListener那樣控制在哪個階段發生，默認只能在冒泡階段發生，同時行為需要添加on（和DOM0特別的類似）

box.attachEvent('onclick',fn1)

注意：和標準瀏覽器的事件池機制對比:

1、順序問題:執行的時候順序是混亂的，標準瀏覽器是按照綁定順序依次執行的

2、重復問題:ie6-8可以給同一個元素的同一個行為綁定多個相同的方法

3、this問題:ie6-8中當方法執行的時候，方法中的this不是當前的元素box而是window

以上是“js之dom2級事件的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！