快捷導(dǎo)航

js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識詳解

更新時間：2017年07月27日 15:05:01 作者：diasa

這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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:當(dāng)頁面中的DOM結(jié)構(gòu)（HTML結(jié)構(gòu)加載完成）觸發(fā)的行為

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

window.onload = function(){}

//當(dāng)頁面中的所有資源都加載完成（圖片、HTML結(jié)構(gòu)、音視頻...）才會執(zhí)行后面的函數(shù)；并且在一個頁面中只能用一次，后面在寫會把前面的覆蓋掉；->因?yàn)樗遣捎肈OM0事件綁定，所以只能綁定一次
    　$(document).ready(function(){})//->$(function(){})
    /*
      只要頁面中的HTML結(jié)構(gòu)加載完成就會執(zhí)行對應(yīng)的函數(shù)；并且在同一個頁面中可以出現(xiàn)多次。因此這個是采用DOM2事件的綁定，綁定的行為是DOMContentLoaded
    */

DOM2級添加和移除事件細(xì)節(jié)

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

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

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

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

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

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