快捷導(dǎo)航

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

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

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

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

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

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

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

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

window.onload = function(){}

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

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

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

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

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

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

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

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