#javascript# DOM2

BLUE 發布于2019-08-26 13:50 / 2437人閱讀

摘要：當元素的某一個行為被觸發，瀏覽器會把當前存放在事件池中的所有方法，依次按照存放的先后順序執行。瀏覽器會把一些常用的事件掛載到元素對象的私有屬性上。

DOM2事件綁定的原理
1.DOM2事件綁定使用的addEventListener/attachEvent都是在EventTarget這個內置類的原型上定義的，我們使用的時候，會通過原型鏈找個這個方法，然后執行綁定的事件。
2.瀏覽器會給當前元素的某一個事件行為開辟一個事件池（事件隊列），準確來說，瀏覽器有一個統一的事件池，我們給每個元素綁定的某個方法都會放在這個事件池中，然后通過相關的標識來進行區分。當我們通過addEventListener/attachEvent做事件監聽的時候，會把綁定的方法存放在事件池中。
3.當元素的某一個行為被觸發，瀏覽器會把當前存放在事件池中的所有方法，依次按照存放的先后順序執行。

DOM2特點

所有DOM0支持的事件行為DOM2都可以使用，而且DOM2還支持一些DOM0沒有的事件行為：DOMContentLoaded

//DOM0下沒有這個屬性：
document.body.DOMContentLoaded === undefined

//DOM2標準瀏覽器下：
document.body.addEventListener("DOMContentLoaded",function(){
    //標準瀏覽器中兼容這個事件，當瀏覽器中的DOM結構加載完成，就會觸發這個事件（也會把綁定的方法執行）
},false)

//DOM2下IE6~8下也不支持這個事件
document.body.attachEvent("onDOMContentLoaded",function(){
})

2.DOM2中可以給當前元素的某一個事件行為綁定多個不同的方法（因為綁定的所有方法都存放在事件池中）

function fn1(){
console.log("1");
}

function fn2(){
console.log("2");
}

function fn3(){
console.log("3");
}

document.body.addEventListener("click", fn1, false);
document.body.addEventListener("click", fn3, false);
document.body.addEventListener("click", fn2, false);

//fn2事件移除。移除的時候要求   事件類型、綁定的方法、傳播階段三個完全一致才可以移除掉

document.body.removeEventListener("click", fn2, false)

DOM0和DOM2執行順序的問題

function fn(){
console.log(1);
}

document.addEventListerner("click", fn, false);
document.addEventListerner("click", fn, false);//第二次存儲不到事件池中，因為事件池中已經存在fn。  到這里只會輸出 1
document.onclick = fn;//會輸出  1  1
document.onclick = function() {
    console.log(2);
}
document.addEventListerner("click", function(){
console.log(3);
}, false);
//輸出結果 1 2 3
// 1. DOM0和DOM2綁定的方法是毫無關系的（因為他們是兩套不同的處理機制）,即使綁定的方法相同，也是執行2次
//2. 誰先綁定，就先執行誰。

DOM0：瀏覽器會把一些常用的事件掛載到元素對象的私有屬性上。讓我們可以實現DOM0事件綁定
DOM2：凡是瀏覽器給元素天生設置的事件在DOM2中都可以用

云服務器 GPU云服務器 dom0和dom2 javascript javascript: javascript??

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109633.html

JavaScript DOM2和DOM3——“DOM的變化”的注意要點

摘要：和級分為許多模塊，分別描述了的某個非常具體的子集。這些模塊主要有核心視圖事件樣式遍歷和范圍以及。另外還有方法和方法框架的變化框架和內嵌框架分別用和表示，它們在級中都有一個新屬性這個屬性包含一個指針，指向表示框架內容的文檔對象。 DOM2和DOM3級分為許多模塊，分別描述了DOM的某個非常具體的子集。這些模塊主要有核心（Core）、視圖（Views）、事件（Events）、樣式（Styl...

騫諱護 2019-08-19 17:14 評論0 收藏0
JavaScript 簡介

摘要：簡介原文鏈接簡稱是一種輕量級，解釋型的編程語言，其函數是一等公民。標準的目標是讓任何一種程序設計語言能操控使用任何一種標記語言編寫出的任何一份文檔。核心規定了如何映射基于的文檔結構，以便簡化對文檔的任意部分的訪問和操作。 JavaScript 簡介原文鏈接 JavaScript ( 簡稱：JS ) 是一種輕量級，解釋型的編程語言，其函數是一等公民。眾所周知，它是用于網頁開發的腳...

URLOS 2019-08-20 10:33 評論0 收藏0
# Javascript # DOM2兼容處理

摘要：兼容問題，除了語法上的區別，在處理的機制上也有下列問題順序問題，重復問題，對象問題。沒有進行去重處理。在標準瀏覽器中在低版本中究其根本，都是低版本瀏覽器對于它內置事件池處理機制的不完善導致的。 DOM2兼容問題，除了語法上的區別，在處理的機制上也有下列問題：順序問題，重復問題，this對象問題。語法問題 [標準]curEle.addEventListener(type, fn, fa...

fnngj 2019-08-23 18:01 評論0 收藏0
讀書筆記(05) - 事件 - JavaScript高級程序設計

摘要：而事件分為個級別級事件處理程序，級事件處理程序和級事件處理程序。級中沒有規范事件的相關內容，所以沒有級事件處理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript來實現用戶與WEB網頁之間的動態交互，接收用戶操作并做出相應的反饋，而事件在此間則充當橋梁的重要角色。日常開發中，經常會...

tinylcy 2019-08-23 13:58 評論0 收藏0
《JavaScript高級程序設計》學習筆記：JavaScript中的事件流和事件處理程序

摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流事件流：從頁面中接收事件的順序。 ...

Rocko 2019-08-19 17:21 評論0 收藏0