js學習總結之dom2級事件基礎知識詳解

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

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

我們使用的DOM2事件綁定，其實是讓box通過原型鏈一直找到EventTarget這個內置類原型上的addEventListener方法實現(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:當頁面中的DOM結構（HTML結構加載完成）觸發(fā)的行為

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

window.onload = function(){}

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

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

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

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

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

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

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

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

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

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

box.attachEvent('onclick',fn1)

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

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

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

dom2
事件

button沒寫type=button會導致點擊時提交
點擊了一個彈窗中的按鈕，想到彈窗消失了，經(jīng)測試后發(fā)現(xiàn)button 沒寫type=button會導致點擊時提交
2014-03-03
Javascript類型判斷相關例題及解析
這篇文章主要介紹了Javascript類型判斷相關例題及解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
JS 判斷某變量是否為某數(shù)組中的一個值的3種方法(總結)
下面小編就為大家?guī)硪黄狫S 判斷某變量是否為某數(shù)組中的一個值的3種方法(總結)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
javascript與jquery動態(tài)創(chuàng)建html元素示例
這篇文章主要介紹了javascript與jquery動態(tài)創(chuàng)建html元素的方法,結合實例形式分析了javascript與jQuery動態(tài)創(chuàng)建頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-07-07
原生js 實現(xiàn)表單驗證功能
這篇文章主要介紹了原生js如何實現(xiàn)表單驗證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
2021-02-02
微信小程序實現(xiàn)留言板
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)留言板，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
js實現(xiàn)簡單進度條效果
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單進度條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
Summernote實現(xiàn)圖片上傳功能的簡單方法
下面小編就為大家?guī)硪黄猄ummernote實現(xiàn)圖片上傳功能的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
圖片連續(xù)滾動代碼[兼容IE/firefox]
網(wǎng)上有不少的連續(xù)滾動實現(xiàn)代碼，下面的這個是兼容性不錯的代碼。大家可以測試下。
2009-06-06
Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)
這篇文章主要介紹了Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)的相關資料,需要的朋友可以參考下
2016-02-02