HTML DOM-事件

TML DOM 允許 JavaScript 對 HTML 事件作出反應(yīng)。

實例

Mouse Over Me

Click Me

avaScript與HTML之間的交互是通過事件實現(xiàn)的。事件，就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用偵聽器（或處理程序）來預定義事件，以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。這種在傳統(tǒng)軟件工程中被稱為觀察者模式的模型，支持頁面的行為與頁面的外觀之間的松散耦合。

事件最早是在IE3和NetscapeNavigator 2中出現(xiàn)的，當時是作為分擔服務(wù)器運算負載的一種手段。在IE4和Navigator4發(fā)布時，這兩種瀏覽器都提供了相似但不相同的API，這些API并存經(jīng)過了好幾個主要版本。DOM2級規(guī)范開始嘗試以一種符合邏輯的方式來標準化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都實現(xiàn)了"DOM2級事件"模塊的核心部分。IE8是最后一個仍然使用其專有事件系統(tǒng)的主要瀏覽器。

事件流

當瀏覽器發(fā)展到第四代時，瀏覽器開發(fā)團隊遇到了一個很有意思的問題：頁面的哪一部分會擁有某個特定的事件？要明白這個問題問的是什么，可以想象畫在一張紙上的一組同心圓。如果把手指放在圓心上，那么指向的不是一個圓，而是紙上的所有圓。兩家公司的瀏覽器開發(fā)團隊在看待瀏覽器事件方面還是一致的。如果單擊了某個按鈕，都認為單擊事件不僅僅發(fā)生在按鈕上。也就是說，單擊按鈕的同時，也單擊了按鈕的容器元素，甚至也單擊了整個頁面。

事件流描述的是從頁面中接收事件的順序。但有意思的是，IE和Netscape開發(fā)團隊居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。

事件冒泡

IE的事件流叫做事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實現(xiàn)上還是有一些差別。IE5.5及更早版本中的事件冒泡會跳過<html>元素（從<body>直接跳到document）。IE9、Firefox、Chrome和Safari則將事件一直冒泡到window對象。

事件捕獲

NetscapeCommunicator團隊提出的另一種事件流叫做事件捕獲。事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接收到事件，而最具體的節(jié)點應(yīng)該最后接收到事件。事件捕獲的用以在于在事件到達預定目標之前捕獲它。雖然事件捕獲是Netscape Communicator唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也支持這種事件流模型。盡管"DOM2級事件"規(guī)范要求事件應(yīng)該從document對象開始傳播，但這些瀏覽器都是從window對象開始捕獲事件的。

DOM事件流

"DOM2級事件"規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應(yīng)。

事件處理程序

事件就是用戶或瀏覽器自身執(zhí)行的某種動作。諸如click、load和mouseover，嗾使事件的名字。而響應(yīng)某個事件的函數(shù)就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以"on"開頭，因此click事件的事件處理程序就是onclick、load事件的事件處理程序就是onload。為事件指定處理程序的方式有好幾種。

HTML事件處理程序

某個元素支持的每種事件，都可以使用一個與相應(yīng)事件處理程序同名的HTML特性來指定。這個特性的值應(yīng)該是能夠執(zhí)行的JavaScript代碼。例如，要在按鈕被單擊時執(zhí)行一些JavaScript，可以像下面這樣編寫代碼：

當單擊這個按鈕時，就會顯示一個警告框。這個操作是通過指定onclick特性并將一些JavaScript代碼作為它的值來定義的。由于這個值是JavaScript，因此不能在其中使用未經(jīng)轉(zhuǎn)義的HTML語法字符，例如和號（&）、雙引號（""）、小于號（<）或大于號（>）。為了避免使用HTML實體，這里使用了單引號。如果想要使用雙引號，那么既要將代碼改成如下所示：

在HTML中定義的事件處理程序可以包含要執(zhí)行的具體動作，也可以調(diào)用在頁面其他地方定義的腳本。如下面的例子所示：

function showMessage(){

alert("Hello World!");

}

</script>

在這個例子中，單擊按鈕就會調(diào)用showMessage()函數(shù)。這個函數(shù)是在一個獨立的<script>元素中定義的，當然也可以被包含在一個外部文件中。事件處理程序中的代碼在執(zhí)行時，有權(quán)訪問全局作用域中的任何代碼。

這樣指定事件處理程序具有一些獨到之處。首先，這樣會創(chuàng)建一個封裝著元素屬性值的函數(shù)。這個函數(shù)中有一個局部變量event，也就是事件對象。

通過event變量，可以直接訪問事件對象，不用自己定義它，也不用從函數(shù)的參數(shù)列表中讀取。在這個函數(shù)內(nèi)部，this值等于事件的目標元素。

關(guān)于這個動態(tài)創(chuàng)建的函數(shù)，另一個有意思的地方是它擴展作用域的方式。在這個函數(shù)內(nèi)部，可以像訪問局部變量一樣訪問document及該元素本身的成員。這個函數(shù)使用with像下面這樣擴展作用域：

function funcName(){

with(document){

with(this){

//元素屬性值

}

如此一來，事件處理程序要訪問自己的屬性就簡單多了。下面這行代碼與前面的例子效果相同：

如果當前元素是一個表單輸入元素，則作用域中還會包含表單元素（父元素）的入口，這個函數(shù)就變成了如下所示：

function funcName(){

with(this.form){

with(this){

//元素屬性值

}

實際上，這樣擴展作用域的方式無非就是想讓事件處理程序無需引用表單元素就能訪問其他表單字段。例如：

</form>

在這個例子中，單擊按鈕會顯示文本框中的文本，值得注意的是，這里直接引用了username_元素。不過，在HTML中指定事件處理程序有兩個缺點。首先，存在一個時差問題。因為用戶可能會在HTML元素一出現(xiàn)在頁面上就觸發(fā)相應(yīng)的事件，但當時的事件處理程序可能尚不舉杯執(zhí)行條件。以前面的例子來說明，假設(shè)showMessage()函數(shù)是在按鈕下方、頁面的最底部定義的。如果用戶在頁面解析showMessage()函數(shù)之前就點擊了按鈕，就會引發(fā)錯誤。為此，很多HTML事件處理程序就會被封裝在try-catch塊中，以便錯誤不會浮出水面。

另一個缺點是，這樣擴展時間處理程序的作用域鏈在不同瀏覽器中會導致不同結(jié)果。不同JavaScript引擎遵循的標識符解析規(guī)則略有差異，很可能在訪問非限定對象成員時出錯。

通過HTML指定時間處理程序的最后一個缺點是HTML與JavaScript代碼緊密耦合。如果要更換事件處理程序，就要改動兩個地方：HTML代碼和JavaScript代碼。而這也是許多開發(fā)人員摒棄HTML事件處理程序，轉(zhuǎn)而使用JavaScript指定時間處理程序的原因所在。

DOM0 級事件處理程序

通過JavaScript指定事件處理程序的傳統(tǒng)方式，就是將一個函數(shù)賦值給一個時間處理程序?qū)傩浴＿@種為事件處理程序賦值的方法是在第四代Web瀏覽器中出現(xiàn)的，而且至今仍然為所有現(xiàn)代瀏覽器所支持。原因一是簡單，二是具有跨瀏覽器的優(yōu)勢。要使用JavaScript指定事件處理程序，首先必須取得一個要操作的對象的引用。

每個元素（包括window和document）都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫，例如onclick。將這種屬性的值設(shè)置為一個函數(shù)，就可以指定事件處理程序，如：

varbtn=document.getElementById("myBtn");

btn.onclick=function(){

alert("Clicked");

}

在此，我們通過文檔對象取得了一個按鈕的引用，然后為它指定了onclick事件處理程序。但要注意，在這些代碼運行以前不會指定事件處理程序，因此如果這些代碼在頁面中位于按鈕后面，就有可能在一段時間內(nèi)怎么單擊都沒有反應(yīng)。

使用DOM 0 級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行；換句話說，程序中的this引用當前元素。可以在事件處理程序中通過this訪問元素的任何屬性和方法。以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

也可刪除通過DOM0級方法指定的事件處理程序，只要像下面這樣將時間處理程序?qū)傩缘闹翟O(shè)置為null即可：

btn.onclick=null;//刪除事件處理程序

如果使用HTML指定事件處理程序，那么onclick屬性的值就是一個包含著在同名HTML特性中指定的代碼的函數(shù)。而將相應(yīng)的屬性設(shè)置為null，也可以刪除以這種方式指定的事件處理程序。

DOM2級事件處理程序

"DOM2級事件"定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點中都包含這兩個方法，并且它們都接受3個參數(shù)：要處理的事件名、作為時間處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

要在click事件添加事件處理程序，可以使用下列代碼：

varbtn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert(this.id);

},false);

上面的代碼為一個按鈕添加了onclick事件處理程序，而且該事件會在冒泡階段被觸發(fā)（因為最后一個參數(shù)是false）。與DOM0級方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運行。使用DOM2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序。如：

varbtn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert(this.id);

},false);

btn.addEventListener("click",function(){

alert("Hello World");

},false);

這里為按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照添加它們的順序觸發(fā)，因此首先會顯示元素的ID，其次會顯示"Hello World"消息。

通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除，移除時傳入的參數(shù)與添加時使用的參數(shù)相同。這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除，如：

varbtn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert(this.id);

},false);

btn.removeEventListener("click",function(){//沒有用！

alert(this.id);

},false);

在這個例子中，使用addEventListener()添加了一個事件處理程序。雖然調(diào)用removeEventListener()時看似使用了相同的參數(shù)，但實際上，第二個參數(shù)與傳入addEventListener()中的那一個是完全不同的函數(shù)。而傳入removeEventListener()中的事件處理程序函數(shù)必須與傳入addEventListener()中的相同，如：

var handler = function(){

alert(this.id);

}

varbtn=document.getElementById("myBtn");

btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false);//有效

重寫后的例子沒有問題，是因為在addEventListener()和removeEventListener()中使用了相同的函數(shù)。

大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在事件達到目標之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段。如果不是特別需要，不建議在事件捕獲階段注冊事件處理程序。

IE事件處理程序

IE實現(xiàn)了與DOM中類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接受相同的兩個參數(shù)：事件處理程序名稱與事件處理程序函數(shù)。由于IE8及更早版本只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。

要使用attachEvent()為按鈕添加一個事件處理程序，可以使用以下代碼。

varbtn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){

alert("Clicked");

});

注意，attachEvent()的第一個參數(shù)是"onclicke"，而非DOM的addEventListener()方法中的"click"。

在IE中使用attachEvent()與使用DOM0級方法的主要區(qū)別在于事件處理程序的作用域。在使用DOM0級方法的情況下，事件處理程序會在其所屬元素的作用域內(nèi)運行；在使用attachEvent()方法的情況下，事件處理程序會在全局作用域中運行，因此this等于window。在編寫跨瀏覽器的代碼時，牢記這一區(qū)別非常重要。

與addEventListener()類似，attachEvent()方法也可以用來為一個元素添加多個事件處理程序。如：

varbtn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){

alert("Clicked");

});

btn.attachEvent("onclick",function(){

alert("Hello World");

});

這里，調(diào)用了兩次attachEvent()，為同一個按鈕添加了兩個不同的事件處理程序。不過，與DOM方法不同的是，這些事件處理程序不是以添加它們的順序執(zhí)行，而是以相反的順序被觸發(fā)。單擊這個例子中的按鈕，首先看到的是"Hello World"，然后才是"Clicked"。

使用attachEvent()添加的事件可以通過detachEvent()來移除，條件是必須提供相同的參數(shù)。

IE11中需要使用addEventListener()和removeEventListener()。

跨瀏覽器的事件處理程序

為了以跨瀏覽器的方式處理事件，不少開發(fā)人員會使用能夠隔離瀏覽器差異的JavaScript庫，還有一些開發(fā)人員會自己開發(fā)最合適的事件處理的方法。自己編寫代碼其實也不難，只要恰當?shù)厥褂媚芰z測即可。要保證處理事件的代碼能在大多數(shù)瀏覽器下一致地運行，只需關(guān)注冒泡階段。

第一個要創(chuàng)建的方法是addHandler()，它的職責是視情況分別使用DOM0級方法、DOM2級方法或IE方法來添加事件。這個方法屬于一個叫EventUtil的對象。addHandler()方法接受3個參數(shù)：要操作的元素、事件名稱和事件處理程序函數(shù)。

與addHandler()對應(yīng)的方法是removeHandler()，它也接受相同的參數(shù)。這個方法的職責是移除之前添加的事件處理程序——無論事件程序是采用什么方式添加到元素中的，如果其他方法無效，默認采用DOM0級方法。

var EventUtil={

addHandler:function(element,type,handler){

type=type.toLowerCase();

type=type.substring(0,2)=="on"?type:"on"+type;

if(element.addEventListener){

element.addEventListener(type.substring(2),handler,false);

}else if(element.attachEvent){

element.attachEvent(type,handler);

}else{

element[type]=handler;

}

removeHandler:function(element,type,handler){

type=type.toLowerCase();

type=type.substring(0,2)=="on"?type:"on"+type;

if(element.removeEventListener){

element.removeEventListener(type.substring(2),handler,false);

}else if(element.detachEvent){

element.detachEvent(type,handler);

}else{

element[type]=null;

}

};

這兩個方法首先都會檢測傳入的元素是否存在DOM2級方法。如果存在DOM2級方法，則使用該方法，其次是IE方法，最后是DOM0級方法。無論傳入的事件名稱是DOM類型的還是IE中的，都會自動匹配成適合的而且會進行小寫轉(zhuǎn)換。使用上面方法時先獲取到element，定義好handler事件傳入對應(yīng)的方法中即可。

事件對象

在觸發(fā)DOM上的某個事件時，會產(chǎn)生一個事件對象event，這個對象中包含著所有與事件有關(guān)的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關(guān)的信息。例如，鼠標操作導致的事件對象中，會包含鼠標位置的信息，而鍵盤操作導致的事件對象中，會包含與按下的鍵有關(guān)的信息。所有瀏覽器都支持event對象，但支持方式不同。

DOM中的事件對象

兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法（DOM0級或DOM2級），都會傳入event對象。event對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性和方法也不一樣。不過，所有事件都會有下表列出的成員。

屬性/方法類型讀/寫說明bubblesBoolean只讀表明事件是否冒泡cancelableBoolean只讀表名是否可以取消事件的默認行為currentTargetElement只讀其事件處理程序當前正在處理事件的那個元素defaultPreventedBoolean只讀為true表示已經(jīng)調(diào)用了preventDefault()detailInteger只讀與事件相關(guān)的細節(jié)信息eventPhaseInteger只讀調(diào)用事件處理程序的階段：1事件捕獲，2處于目標，3冒泡階段preventDefault()Function只讀取消事件的默認行為。如果cancelable為true，可以使用這個方法stopImmediatePropagation()Function只讀取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調(diào)用。stopPropagation()Function只讀取消事件的進一步捕獲或冒泡。如果bubbles為true，則可以使用這個方法targetElement只讀事件的目標trustedBoolean只讀為true表示事件是瀏覽器生成的，false表示事件是由開發(fā)人員通過JavaScript創(chuàng)建的typeString只讀被觸發(fā)的事件的類型viewAbstractView只讀與事件關(guān)聯(lián)的抽象視圖。等同于發(fā)生事件的window對象在事件處理程序內(nèi)部，對象this始終等于currentTarget的值，而target則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，則this、currentTarget和target包含相同的值。

在需要通過一個函數(shù)處理多個事件時，可以使用type屬性。下面使用事件對象做一個例子，模擬購物網(wǎng)站中鼠標在圖片上時顯示該圖片的局部放大圖，點擊該圖片時，在新的網(wǎng)頁中顯示該圖片，需要做一些準備：id為kitty的背景圖（beautykitty.jpg）的像素大小為該div的大小，將該圖片復制一份（beautykittybig.jpg）,并調(diào)整大小為原圖片寬高x4。然后就可以實驗下面的例子了。

<!DOCTYPE html>

<html>

<head>

<title>Sample Page</title>

</head>

<body>

<table>

<tr>

<td>

</div>

</td>

<td>

</td>

</tr>

</table>

</body>

var EventUtil={

addHandler:function(element,type,handler){

type=type.toLowerCase();

type=type.substring(0,2)=="on"?type:"on"+type;

if(element.addEventListener){

element.addEventListener(type.substring(2),handler,false);

}else if(element.attachEvent){

element.attachEvent(type,handler);

}else{

element[type]=handler;

}

removeHandler:function(element,type,handler){

type=type.toLowerCase();

type=type.substring(0,2)=="on"?type:"on"+type;

if(element.removeEventListener){

element.removeEventListener(type.substring(2),handler,false);

}else if(element.detachEvent){

element.detachEvent(type,handler);

}else{

element[type]=null;

}

};

varkitty=document.getElementById('kitty');

var clickHandler=function(){

window.open("http://localhost:8080/demo/fiels/beautykitty.jpg","HellKitty");

}

varmousemoveHandler=function(){

var offsetX=(event.offsetX)*4;

var offsetY=(event.offsetY)*4;

var SQStyle=document.getElementById("SQ").style;

SQStyle.visibility="visible";

SQStyle.top=event.offsetY + "px";

SQStyle.left=event.offsetX + "px";

document.getElementById("bigImg").style.background="url('../fiels/beautykittybig.jpg')-"+offsetX+"px -"+offsetY+"px";

}

varmouseoutHandler=function(){

document.getElementById("bigImg").style.background="gray";

}

EventUtil.addHandler(kitty,"onmousemove",mousemoveHandler);

EventUtil.addHandler(kitty,"onclick",clickHandler);

EventUtil.addHandler(kitty,"onmouseout",mouseoutHandler);

</script>

</html>

做出來的效果就是：

要阻止事件的默認行為，可以使用preventDefault()方法。例如，連接的默認行為就是在被單擊時會導航到其href特性指定的URL。如果項阻止連接導航這一默認行為，那么通過連接的onclick事件處理程序就可以取消它，如：

varlink=document.getElementById('myLink');

link.onclick=function(){

if(new Date().getHours() > 15){

event.preventDefault();

}

只有cancelable屬性設(shè)置為true的事件，才可以使用preventDefault()來取消其默認行為。

另外，stopPropagation()方法用于立即停止事件在DOM層次中的傳播，即取消進一步的事件捕獲或冒泡。例如，直接添加到一個按鈕的事件處理程序可以調(diào)用stopPropagation()，從而避免觸發(fā)注冊在document.body上面的事件處理程序，如：

varlink=document.getElementById('myLink');

link.onclick=function(){

alert('Link clicked!');

event.preventDefault();

event.stopPropagation();

}

document.body.onclick=function(){

alert("Body clicked!");

}

對于這個例子而言，如果步調(diào)用stopPropagation()，就會在單擊連接時出現(xiàn)兩個警告框。調(diào)用stopPropagation()后click事件就不會傳播到document.body，因此就不會觸發(fā)注冊在這個元素上的onclick事件處理程序。

事件對象的eventPhase屬性，可以用來確定事件當前位于事件流的哪個階段。如果是在捕獲階段調(diào)用的事件處理程序，那么eventPhase等于1；如果事件處理程序處于目標對象上，則eventPhase等于2；如果是在冒泡階段調(diào)用的事件處理程序，eventPhase等于3。這里要注意的是，盡管"處于目標"發(fā)生在冒泡階段，但eventPhase仍然一直等于2。

事件類型

Web瀏覽器中可能發(fā)生的事件有很多類型。如前所述，不同的事件類型具有不同的信息，而"DOM3級事件"規(guī)定了以下幾類事件。

UI（UserInterface，用戶界面）事件，當用戶與頁面上的元素交互時觸發(fā)；

焦點事件，當元素獲得或失去焦點時觸發(fā)；

鼠標事件，當用戶通過鼠標在頁面上執(zhí)行操作時觸發(fā)；

滾輪事件，當使用鼠標滾輪（或類似設(shè)備）時觸發(fā)；

文本事件，當在文檔中輸入文本時觸發(fā)；

鍵盤事件，當用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)；

合成事件，當為IME（Input MethodEditor，輸入法編輯器）輸入字符時觸發(fā)；

變動事件，當?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)；

變動名稱事件，當元素或?qū)傩悦Q變動時觸發(fā)。此類事件已經(jīng)廢棄，沒有任何瀏覽器實現(xiàn)它們。

除了這幾類事件之外，HTML5也定義了一組事件，而有些瀏覽器還會在DOM和BOM中實現(xiàn)其他專有事件。這些專有的事件一般都是根據(jù)開發(fā)人員需求定制的，沒有什么規(guī)范，因此不用瀏覽器的實現(xiàn)有可能也不一致。

DOM3級事件模塊在DOM2級事件模塊基礎(chǔ)上重新定義了這些事件，也添加了一些新事件。包括IE9+在內(nèi)的所有主流瀏覽器都支持DOM2級事件。IE9+也支持了DOM3級事件。

UI事件

UI事件指的是那些不一定與用戶操作有關(guān)的事件。這些事件在DOM規(guī)范出現(xiàn)之前，都是以這種或那種形式存在的，而在DOM規(guī)范中保留是為了向后兼容。現(xiàn)有的UI事件如下。

DOMActivate：表示元素已經(jīng)被用戶操作（通過鼠標或鍵盤）激活。這個事件在DOM3級事件中被廢棄，但Firefox2+和Chrome支持它。考慮到不同瀏覽器實現(xiàn)的差異，不建議使用這個事件。

load：當頁面完全加載后在window上面觸發(fā)，當所有框架都加載完畢時在框架集上面觸發(fā)，當圖像加載完畢時在<img>元素上觸發(fā)，或者當嵌入的內(nèi)容加載完畢時在<object>元素上面觸發(fā)。

unload：當頁面完全卸載后在window上面觸發(fā)，當所有框架都卸載后在框架集上面觸發(fā)，或者當嵌入的內(nèi)容卸載完畢后在<object>元素上面觸發(fā)。

abort：在用戶停止下載過程時，如果嵌入的內(nèi)容沒有加載完，則在<object>元素上面觸發(fā)。

error：當發(fā)生JavaScript錯誤時window上面觸發(fā)，當無法加載如想時在<img>元素上面觸發(fā)，當無法加載嵌入內(nèi)容時在<object>元素上面觸發(fā)，或者當有一或多geese框架無法加載時在框架集上面觸發(fā)。

select：當用戶選擇文本框（<input>或<textarea>）中的一或多個字符時觸發(fā)。

resize：當窗口或框架的大小變化時在window或框架上面觸發(fā)。

scroll：當用戶滾動帶滾動條的元素中的內(nèi)容時，在該元素上面觸發(fā)。<body>元素中包含加載頁面的滾動條。

多數(shù)這些事件都與window對象或表單控件相關(guān)。

處理DOMActivate之外，其他事件在DOM2級事件中都歸為HTML事件（DOMActivate在DOM2級事件中仍然屬于UI事件）。要確定瀏覽器是否支持DOM2級事件規(guī)定的HTML事件，可以使用如下代碼：

var isSupported =document.implementation.hasFeature("UIEvent","2.0");

注意，只有根據(jù)"DOM2級事件"實現(xiàn)這些事件的瀏覽器才會返回true。而以非標準方式支持這些事件的瀏覽器則會返回false。要確定瀏覽器是否支持"DOM3級事件"定義的事件，可以使用如下代碼：

var isSupported = document.implementation.hasFeature("UIEvent","3.0");

load事件

JavaScript中最常用的一個事件就是load。當頁面完全加載后（包括所有圖像、JavaScript文件、CSS文件等外部資源），就會觸發(fā)window上面的load事件。有兩種定義onload事件處理程序的方式。第一種方式是使用如下的JavaScript代碼：

EventUtil.addHandler(window,"load", function(event){

alert("Loaded!");

});

這是通過JavaScript來指定事件處理程序的方式，使用的前面定義的跨瀏覽器的EventUtil對象。與添加其他事件一樣，這里也給事件處理程序傳入了一個event對象。這個event對象中不包含有關(guān)這個事件的任何附加信息，但在兼容DOM的瀏覽器中，event.target屬性的值會被設(shè)置為document。

第二種指定onload事件處理程序的方式是為<body>元素添加一個onload特性。一般來說，在window上面發(fā)生的任何事件都可以在<body/>元素中通過相應(yīng)的特性來指定，因為在HTML中無法訪問window元素。實際上，這只是為了保證向后兼容的一種權(quán)宜之計，但所有瀏覽器都能很好地支持這種方式，建議盡可能使用JavaScript方式。

圖像上面也可以觸發(fā)load事件，無論是在DOM中的圖像元素還是HTML中的圖像元素。因此可以在HTML中為任何圖像指定onload事件處理程序，例如：

這樣，當例子中的圖像加載完畢后就會顯示一個警告框。同樣的功能還可以使用JavaScript來實現(xiàn)。

還有一些元素也以非標準的方式支持load事件。在IE9+、Firefox、Opera、Chrome和Safari3+及更高版本中，<script>元素也會觸發(fā)load事件，以便開發(fā)人員確定動態(tài)加載的JavaScript文件是否加載完畢。與圖像不同，只有在設(shè)置了<script>元素的src屬性并將該元素添加到文檔后，才會開始下載JavaScript文件。換句話說，對于<script>元素而言，指定src屬性和指定事件處理程序的先后順序就不重要了。

unload事件

與load事件對應(yīng)的是unload事件，這個事件在文檔被完全卸載后觸發(fā)。只要用戶從一個頁面切換到另一個頁面，就會發(fā)生unload事件。而利用這個事件最多的情況是清除引用，以避免內(nèi)存泄漏。

resize事件

當瀏覽器窗口被調(diào)整到一個新的高度或?qū)挾葧r，就會觸發(fā)resize事件。這個事件在window（窗口）上面觸發(fā)，因此可以通過JavaScript或者<body>元素中的onresize特性來指定事件處理程序。

關(guān)于何時會觸發(fā)resize事件，不同的瀏覽器有不同的機制。IE、Safari、Chrome和Opera會在瀏覽器窗口變化了1像素時就觸發(fā)resize事件，然后隨著變化不斷重復觸發(fā)，應(yīng)該注意不要在這個事件的處理程序中加入大計算量的代碼，因為這些代碼可能被頻繁執(zhí)行，從而導致瀏覽器反應(yīng)明顯變慢。瀏覽器窗口最小化或最大化時也會觸發(fā)resize事件。

scroll事件

雖然scroll事件是在window對象上發(fā)生的，但它實際表示的則是頁面中相應(yīng)元素的變化。在混雜模式下，可以通過<body>元素的scrollLeft和scrollTop來監(jiān)控到這一變化；而在標準模式下，除Safari之外的所有瀏覽器都會通過<html>元素來反映這一變化（Safari仍然基于<body>跟蹤滾動位置）。

與resize事件類似，scroll事件也會在文檔被滾動期間重復觸發(fā)，所以有必要盡量保持事件處理程序的代碼簡單。

焦點事件

焦點事件會在頁面獲得或失去焦點時觸發(fā)。利用這些事件并與document.hasFocus()方法及document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤。有以下6個焦點事件。

blur：在元素失去焦點時觸發(fā)。這個事件不會冒泡；所有瀏覽器都支持它。

DOMFocusIn：在元素獲得焦點時觸發(fā)。這個事件與HTML事件focus等價，但它冒泡。只有Opera支持這個事件。DOM3級事件廢棄了DOMFocusIn，選擇了focusin。

DomFocusOut：在元素失去焦點時觸發(fā)。這個事件是HTML事件blur的通用版本。只有Opera支持這個事件。DOM3級事件廢棄了DomFocusOut，選擇了focusout。

focus：在元素獲得焦點時觸發(fā)。這個事件不會冒泡；所有瀏覽器都支持它。

focusin：在元素獲得焦點時觸發(fā)。這個事件與HTML事件focus等價，但它冒泡。

focusout：在元素失去焦點時觸發(fā)。這個事件是HTML事件blur的通用版本。

這一類事件中最主要的兩個是focus和blur，它們都是JavaScript早期就得到所有瀏覽器支持的事件。這些事件的最發(fā)問題是它們不冒泡。因此，IE的focusin和focusout與Opera的DOMFocusIn和DomFocusOut才會發(fā)生重疊。IE的方式最后被DOM3級事件采納為標準方式。

當從頁面中的一個元素移動到另一個元素，會依次觸發(fā)下列事件：

（1） focusout在失去焦點的元素上觸發(fā)；

（2） focusin在獲得焦點的元素上觸發(fā)；

（3） blur在失去焦點的元素上觸發(fā)；

（4） DomFocusOut在數(shù)去焦點的元素上觸發(fā)；

（5） focus在獲得焦點的元素上觸發(fā)；

（6） DOMFocusIn在獲得焦點的元素上觸發(fā)。

其中，blur、DomFocusOut和focusout的事件目標是失去焦點的元素；而focus、DOMFocusIn和focusin的事件目標是獲得焦點的元素。

要確定瀏覽器是否支持這些事件，可以使用如下代碼：

var isSupported =document.implementation.hasFeature("FocusEvent","3.0");

鼠標與滾輪事件

鼠標事件是Web開發(fā)中最常用的一類事件，畢竟鼠標還是最主要的定位設(shè)備。DOM3級事件中定義了9個鼠標事件：

click：在用戶單擊鼠標按鈕（一般是左邊的按鈕）或按下回車鍵時觸發(fā)。這一點對確保易訪問性很重要，意味著onclick事件處理程序既可以通過鍵盤也可以通過鼠標執(zhí)行。

dbclick：在用戶雙擊主鼠標按鈕（一般是左邊的按鈕）時觸發(fā)。從技術(shù)上說，這個事件并不是DOM2級事件規(guī)范中規(guī)定的，但鑒于它得到了廣泛支持，所以DOM3級事件將其納入了標準。

mousedown：在用戶按下了任意鼠標按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseenter：在鼠標從元素外部首次移動到元素范圍之內(nèi)時觸發(fā)。這個事件不冒泡，而且在光標移動到后代元素上不會觸發(fā)。DOM2級事件并沒有定義這個事件，但DOM3級事件將它納入了規(guī)范。

mouseleave：在位于元素上方的鼠標光標移動到元素范圍之外時觸發(fā)。這個事件不冒泡，而且在光標移動到后代元素上不會觸發(fā)。DOM2級事件并沒有定義這個事件，但DOM3級事件將它納入了規(guī)范。

mousemove：當鼠標指針在元素內(nèi)部移動時重復地觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseout：在鼠標指針位于一個元素上方，然后用戶將其一如另一個元素時觸發(fā)。又移入的另一個元素可能位于前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發(fā)這個事件。

mouseover：在鼠標指針位于一個元素外部，然后用戶將其首次一如另一個元素邊界之內(nèi)時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

mouseup：在用戶釋放鼠標按鈕時觸發(fā)。不能通過鍵盤觸發(fā)這個事件。

頁面上的所有元素都支持鼠標事件。除了mouseenter和mouseleave，所有鼠標事件都會冒泡，也可以被取消，而取消鼠標事件將會影響瀏覽器的默認行為。取消鼠標事件的默認行為還會影響其他事件，因為鼠標事件與其他事件是密不可分的關(guān)系。

只有在一個元素上相繼觸發(fā)mousedown和mouseup事件，才會觸發(fā)click事件；如果mousedown和mouseup中的一個被取消，就不會觸發(fā)click事件。類似地，只有觸發(fā)兩次click事件才會觸發(fā)依次dbclick事件。如果有代碼阻止了連續(xù)兩次觸發(fā)click事件（可能是直接取消click事件，也可能通過mousedown或mouseup間接實現(xiàn)），那么就不會觸發(fā)dbclick事件了。在onclick事件中出現(xiàn)了alert語句時也會阻止觸發(fā)dbclick事件，如下面的dbclick事件處理程序用于不會得到執(zhí)行：

這4個事件觸發(fā)的順序始終如下：

（1） mousedown

（2） mouseup

（3） click

（4） mousedown

（5） mouseup

（6） click

（7） dbclick

顯然，click和dbclick事件都會依賴與其他事件的觸發(fā)；然而mousedown和mouseup則不受其他事件的影響。

使用以下代碼可以檢測瀏覽器是否支持以上DOM2級事件（除dbclick、mouseenter和mouseleave之外）：

var isSupported = document.implementation.hasFeature("MouseEvents","2.0");

要檢測瀏覽器是否支持上面的所有事件，可以使用以下代碼：

var isSupported =document.implementation.hasFeature("MouseEvent","3.0");

注意，DOM3級事件的feature名是"MouseEvent"，而非"MouseEvents"

客戶區(qū)坐標位置

鼠標事件都是在瀏覽器視口的特定位置上發(fā)生的。這個位置信息保存在事件對象的clientX和clientY屬性中。所有瀏覽器都支持兩個屬性，它們的值表示事件發(fā)生時鼠標在視口中的水平和垂直坐標。

可以使用類似下列代碼取得鼠標事件的客戶坐標信息，可在頁面中看到隨著鼠標的移動，坐標的顯示跟隨變化：

</body>

var EventUtil={

addHandler:function(element,type,handler){

type=type.toLowerCase();

type=type.substring(0,2)=="on"?type:"on"+type;

if(element.addEventListener){

element.addEventListener(type.substring(2),handler,false);

}else if(element.attachEvent){

element.attachEvent(type,handler);

}else{

element[type]=handler;

}

removeHandler:function(element,type,handler){

type=type.toLowerCase();

type=type.substring(0,2)=="on"?type:"on"+type;

if(element.removeEventListener){

element.removeEventListener(type.substring(2),handler,false);

}else if(element.detachEvent){

element.detachEvent(type,handler);

}else{

element[type]=null;

}

};

var label =document.getElementById("position");

var showCoordinate= function(event){

var position="(" + event.clientX + " , " + event.clientY + ")";

label.innerText=position;

label.style.paddingTop=(event.clientY-20)+"px";

label.style.paddingLeft=(event.clientX-50)+"px";

}

EventUtil.addHandler(document,"onmousemove",showCoordinate);

</script>

頁面坐標位置

通過客戶區(qū)坐標能夠知道鼠標是在視口中什么位置，而頁面坐標通過事件對象的pageX和pageY屬性，能夠告訴你事件是在頁面中什么位置發(fā)生的。換句話說，這兩個屬性表示鼠標光標在頁面中的位置，因此坐標是從頁面本身而非視口的左邊和定邊計算的。

在頁面沒有滾動的情況下，pageX和pageY的值與clientX和clientY的值相等。

IE8及更早版本不支持事件對象上的頁面坐標，不過使用客戶區(qū)坐標和滾動信息可以計算出來。這個時候需要用到document.body（混雜模式）或document.documentElement（標準模式）中的scrollLeft和scrollTop屬性。

屏幕坐標位置

鼠標事件發(fā)生時，不僅會有相對于瀏覽器窗口的位置，還有一個相對于整個電腦屏幕的位置。而通過screenX和screenY屬性就可以確定鼠標事件發(fā)生時鼠標指針相對于整個屏幕的坐標信息。

修改鍵

雖然鼠標事件主要是使用鼠標來觸發(fā)的，但在按下鼠標時鍵盤上某些鍵的狀態(tài)也可以影響到索要采取的操作。這些修改鍵就是Shfit、Ctrl、Alt和Meat（在Windows鍵盤中是Windows鍵，在蘋果機中是Cmd鍵），它們經(jīng)常被用來修改鼠標事件的行為。DOM為此規(guī)定了4個屬性，表示這些修改鍵的狀態(tài)：shfitKey、ctrlKey、altKey和metaKey。這些屬性中包含的都是布爾值，如果相應(yīng)的鍵被按下了，則值為true，否則為false。當某個鼠標事件發(fā)生時，通過檢測這幾個屬性就可以確定用戶是否同時按下了其中的鍵。如：

EventUtil.addHandler(btn,"click",function(event){

var keys=new Array();

if(event.shiftKey){

keys.push("shfit");

}

if(event.ctrlKey){

keys.push("ctrl");

}

if(event.altKey){

keys.push("alt");

}

if(event.metaKey){

keys.push("meta");

}

console.log("keys:" + keys.join(","));

});

相關(guān)元素

在發(fā)生mouseover和mouseout事件時，還會涉及更多的元素。這兩個事件都會涉及把鼠標指針從一個元素的邊界之內(nèi)移動到另一個元素的邊界之內(nèi)。對mouseover事件而言，事件的主要目標是獲得光標的元素，而相關(guān)元素就是哪個失去光標的元素。類似地，對mouseout事件而言，事件的主要目標是失去光標的元素，而相關(guān)元素則是光標的元素。

鼠標按鈕

只有在主鼠標按鈕被單擊（或鍵盤回車被按下）時才會觸發(fā)click事件，因此檢測按鈕的信息并不是必要的。但對于mousedown和mouseup事件來說，則在其event對象存在一個button屬性，表示按下或釋放的按鈕。DOM的button屬性可能有如下3個值：0表示主鼠標按鈕，1表示中間的鼠標滾輪，2表示次鼠標按鈕。在常規(guī)的設(shè)置中，主鼠標按鈕就是鼠標左鍵，而次鼠標按鈕就是鼠標右鍵。

更多的事件信息

"DOM2級事件"規(guī)范在event對象中還提供了detail屬性，用于給出有關(guān)事件的更多信息。對于鼠標事件來說，detail中包含了一個數(shù)值，表示在給定位置上發(fā)生了多少次單擊。在同一個像素上相繼地發(fā)生一次mousedown和一次mouseup事件算作一次單擊。details屬性從1開始計數(shù)，每次單擊發(fā)生后都會遞增。如果鼠標在mousedown和mouseup之間移動了位置，則details會被重置為0。

鼠標滾輪事件

IE6.0首先實現(xiàn)了mousewheel事件。此后，Opera、Chrome和Safari也都實現(xiàn)了這個事件。當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（無論是向上還是向下），就會觸發(fā)mousewheel事件。這個事件可以在任何元素上面觸發(fā)，最終會冒泡到document（IE8）或window（IE9、Opera、Chrome及Safari）對象。與mousewheel事件對應(yīng)的event對象除包含鼠標事件的所有標準信息外，還包含一個特殊的wheelDelta屬性。當用戶向前滾動鼠標滾輪時，wheelDelta是120的倍數(shù)；當向后時，是-120的倍數(shù)。

鍵盤與文本事件

用戶在使用鍵盤時會觸發(fā)鍵盤事件。"DOM2"級事件最初規(guī)定了鍵盤事件，但在最終定稿之前又刪除了相應(yīng)的內(nèi)容。結(jié)果，對鍵盤事件的支持主要遵循的是DOM0級。

"DOM3級事件"為鍵盤事件制定了規(guī)范，有3個鍵盤事件：

keydown：當用戶按下鍵盤上的任意鍵時觸發(fā)，而且如果按住不放的話，會重復觸發(fā)此事件。

keypress：當用戶按下鍵盤上的字符鍵時觸發(fā)，而且按住不放的話，會重復觸發(fā)此事件。按下Esc鍵也會觸發(fā)這個事件。

keyup：當用戶釋放鍵盤上的鍵時觸發(fā)。

雖然所有元素都支持以上3個事件，但只有在用戶通過文本框輸入文本時才最常用到。

只有一個文本事件：textInput。這個事件是對keypress的補充，用以是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會觸發(fā)textInput事件。

在用戶按了一下鍵盤上的字符鍵時，首先會觸發(fā)keydown事件，然后緊跟著是keypress事件，最后會觸發(fā)keyup事件。其中keydown和keypress都是在文本框發(fā)生變化之前被觸發(fā)的；而keyup事件則是在文本框已經(jīng)發(fā)生變化之后被觸發(fā)的。如果用戶按下了一個字符鍵不放，就會重復觸發(fā)keydown和keypress事件，知道用戶松開該鍵為止。

如果用戶按下的是一個非字符鍵，那么首先會觸發(fā)keydown事件，然后就是keyup事件。如果按住這個非字符鍵不放，那么就會一直重復觸發(fā)keydown事件，直到用戶松開這個鍵，此時會觸發(fā)keyup事件。

鍵盤事件與鼠標事件一樣，都支持相同的修改鍵。而且，鍵盤事件的事件對象中也有shfitKey、ctrlKey、altKey和metaKey屬性。IE8及低版本不支持metaKey。

鍵碼

在發(fā)生keydown和keyup事件時，event對象的keyCode屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應(yīng)。對數(shù)字字母字符鍵，keyCode屬性的值與ASCII碼中對應(yīng)小寫字母或數(shù)字的編碼相同。因此，數(shù)字鍵7的keyCode值為55，而字母A鍵的keyCode值為65——與Shfit的狀態(tài)無關(guān)。DOM和IE的event對象都支持keyCode屬性。無論keydown或keyup事件都會存在一些特殊情況。在Firefox和Opera中，按分號鍵時keyCode值為59，也就是ASCII分號中的編碼；但IE和Safari返回186，即鍵盤中按鍵的鍵碼。

字符編碼

發(fā)生keypress事件意味著按下的鍵會影響到屏幕中文本的顯示。在所有瀏覽器中，按下能夠插入或刪除的鍵都會觸發(fā)keypress事件；按下其他鍵能夠觸發(fā)此事件因瀏覽器而異。

IE9、Firefox、Chrome和Safari的event對象都支持一個charCode屬性，這個屬性只有在發(fā)生keypress事件時才包含值，而且這個值是按下的那個鍵所代表字符的ASCII編碼。此時的keyCode通常等于0或者也有可能所按鍵的鍵碼。IE8及之前版本和Opera則是在keyCode中保存字符的ASCII編碼。要想以跨瀏覽器的方式取得字符編碼，首先必須檢測charCode屬性是否可用，如果不可用則使用keyCode，如下所示：

var EventUtil={

//……

getCharCode:function(event){

if(typeof event.charCode == "number"){

return event.charCode;

}else{

return event.keyCode;

}

//……

};

這個方法首先檢測charCode屬性是否包含數(shù)值（在不支持這個屬性的瀏覽器中，值為undefined），如果是返回該值，否則返回keyCode屬性值。在取得了字符編碼之后，就可以使用String.fromCharCode()將其轉(zhuǎn)換成實際的字符。

DOM3級變化

盡管所有瀏覽器都實現(xiàn)了某種形式的鍵盤事件，DOM3級事件還是做出了一些改變。比如，DOM3級事件中的鍵盤事件，不再包含charCode屬性，而是包含兩個新屬性：key和char。

其中，key屬性是為了取代keyCode而新增的，它的值是一個字符串。在按下某個字符鍵時，key的值就是相應(yīng)的文本字符（如"k"或"M"）；在按下非字符鍵時，key的值是相應(yīng)鍵的名（如"Shift"或"Down"）。而char屬性在按下字符鍵時的行為與key相同，但在按下非字符鍵時值為null。

IE9支持key屬性，但不支持char屬性。Safari5和Chrome支持名為keyIdentifier的屬性，在按下非字符鍵（例如Shfit）的情況下與key的值相同。對于字符鍵，keyIdentifier返回一個格式類似"U+0000"的字符串，表示Unicode值。

textInput事件

"DOM3級事件"規(guī)范中引入了一個新事件，名叫textInput。根據(jù)規(guī)范，當用戶在可編輯區(qū)域中輸入字符時，就會觸發(fā)這個事件。這個用于替代keypress的textInput事件的行為稍微有不同。區(qū)別之一就是任何可以獲得焦點的元素都可以觸發(fā)keypress時間愛你，但只有可編輯區(qū)才能觸發(fā)textInput事件。區(qū)別之二是textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會被觸發(fā)，而keypress事件則在按下哪些能夠影響文本顯示的鍵時也會觸發(fā)（例如退格鍵）。

由于textInput事件主要考慮的是字符，因此它的event對象中還包含一個data屬性，這個屬性的值就是用戶輸入的字符（而非字符編碼）。換句話說，用戶在沒有按上檔鍵的情況下按下了S鍵，data的值就是"s"，而如果在按住上檔鍵時按下該鍵，data的值就是"S"。

復合事件

復合事件是DOM3級事件中新添加的一類事件，用于處理IME的輸入序列。IME（Input Method Editor，輸入法編輯器）可以讓用戶輸入在物理鍵盤上找不到的字符。例如，使用拉丁文鍵盤的用戶通過IME照樣能輸入日文字符。IME通常需要同時按住多個見，但最終只輸入一個字符。復合事件就是針對檢測和處理這種輸入而設(shè)計的。有以下三種復合事件。

compositionstart：在IME的文本復合系統(tǒng)打開時觸發(fā)，表示要開始輸入了。

compositionupdate：在向輸入字段中插入新字符時觸發(fā)。

compositionend：在IME的文本復合系統(tǒng)關(guān)閉時觸發(fā)，表示返回正常鍵盤輸入狀態(tài)。

復合事件與文本事件在很多方面都很相似。在觸發(fā)復合事件時，目標是接收文本的輸入字段。但它比文本事件的事件對象多一個屬性data，其中包含以下幾個值中的一個：

如果在compositionstart事件發(fā)生時訪問，包含正在編輯的文本（例如，已經(jīng)選中的需要馬上替換的文本）；

如果在compositionupdate事件發(fā)生時訪問，包含正插入的新字符；

如果在compositionend事件發(fā)生時訪問，包含此次輸入會話中插入的所有字符。

到2016年，大多數(shù)的主流瀏覽器（Safari除外）都已支持復合事件，要確定瀏覽器是否支持復合事件，可以使用以下代碼：

var isSupported=document.implementation.hasFeature("CompositionEvent","3.0");

變動事件

DOM2級的變動事件能在DOM中的某一部分發(fā)生變化時給出提示。變動事件是為XML或HTML DOM設(shè)計的，并不特定于某種語言。DOM2級定義了如下變動事件。

DOMSubtreeModified：在DOM結(jié)構(gòu)中發(fā)生任何變化時觸發(fā)。這個事件在其他任何事件觸發(fā)后都會觸發(fā)。

DOMNodeInserted：在一個節(jié)點作為子節(jié)點被插入到另一個節(jié)點中時觸發(fā)。

DOMNodeRemoved：在節(jié)點從其父節(jié)點中被移除時觸發(fā)。

DOMNodeInsertedIntoDocument：在一個節(jié)點被直接插入文檔或通過子樹直接插入文檔之后觸發(fā)。這個事件在DOMNodeInserted之后觸發(fā)。

DOMNodeRemovedFromDocument：在一個節(jié)點被直接從文檔中移除或通過子樹間接從文檔中移除之前觸發(fā)。這個事件在DOMNodeRemoved之后觸發(fā)。

DOMAttrModified：在特性被修改之后觸發(fā)。

DOMCharacterDataModified：在文本節(jié)點的值發(fā)生變化時觸發(fā)。

使用下列代碼可以檢測出瀏覽器是否支持變動事件：

var isSupported=document.implementation.hasFeature("MutationEvents","2.0");

刪除節(jié)點

在使用removeChild()或replaceChild()從DOM中刪除節(jié)點時，首先會觸發(fā)DOMNodeRemoved事件。這個事件的目標（event.target）是被刪除的節(jié)點，而event.relatedNode屬性中包含著對目標節(jié)點父節(jié)點的引用。在這個事件觸發(fā)時，節(jié)點尚未從其父節(jié)點刪除，因此其parentNode屬性仍然指向父節(jié)點（與event.relatedNode相同）。這個事件會冒泡，因而可以在DOM的任何層次上面處理它。

如果被移除的子節(jié)點包含子節(jié)點，那么在其所有子節(jié)點及這個被移除的節(jié)點上會相繼觸發(fā)DOMNodeRemovedFromDocument事件。這個事件不會冒泡，所以只有直接指定給其中一個子節(jié)點的事件處理程序才會被調(diào)用。這個事件的目標是相應(yīng)的子節(jié)點或者那個被移除的節(jié)點，除此之外event對象中不包含其他信息。

緊隨其后觸發(fā)的是DOMSubtreeModified事件。這個事件的目標是移除節(jié)點的父節(jié)點；此時的event對象也不會提供與事件相關(guān)的其他信息。

插入節(jié)點

在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節(jié)點時，相繼觸發(fā)的事件為：DOMNodeInserted（冒泡）、DOMNodeInsertedIntoDocument（不冒泡）、DomSubtreeModified。

HTML5事件

DOM規(guī)范中沒有涵蓋所有瀏覽器支持的所有事件。很多瀏覽器出于不同的目的——滿足用戶需求或解決特殊問題，還實現(xiàn)了一些自定義的事件。HTML5詳盡列出了瀏覽器應(yīng)該支持的所有事件。

contextmenu事件

表示合適應(yīng)該顯示上下文菜單，以便開發(fā)人員取消默認的上下文菜單而提供自定義的菜單。該事件冒泡。在所有瀏覽器中都可以取消這個事件：在兼容DOM的瀏覽器中，使用event.preventDefault()；在IE中，將event.returnValue的值設(shè)置為false。

Beforeunload事件

之所以有發(fā)生在window對象上的beforeunload事件，是為了讓開發(fā)人員有可能在頁面卸載前阻止這一操作。這個事件會在瀏覽器卸載頁面之前觸發(fā)，可以通過它來取消卸載并繼續(xù)使用原有頁面。但是不能徹底取消這個事件，因為那就相當于讓用戶無法離開當前頁面了。為此，這個事件的意圖是將控制權(quán)交給用戶，顯示的消息會告知用戶頁面將被卸載，詢問用戶是否真的要關(guān)閉頁面，還是希望繼續(xù)留下來。類似事件的應(yīng)用場景很多，比如有些電腦程序退出時會詢問是否退出，網(wǎng)頁游戲在關(guān)閉網(wǎng)頁時會詢問是否再多玩一會……

DOMContentLoaded事件

如前所述，window的load事件會在頁面中的一切都加載完畢時觸發(fā)，但這個過程可能會因為要加載的外部資源過多而頗費周折。而DOMContentLoaded事件則在形成完整的DOM樹之后就會觸發(fā)，不理會圖像、JavaScript文件、CSS文件或其他資源是否已經(jīng)下載完畢。與load事件不同，DOMContentLoaded支持在頁面下載的早起添加事件處理程序，這也就意味著用戶能夠盡早地與頁面進行交互。

要處理DOMContentLoaded事件，可以為document或window添加相應(yīng)的事件處理程序（盡管這個事件會冒泡到window，但它的實際目標實際上是document）。DOMContentLoaded事件對象不會提供任何額外的信息。IE9+、Firefox、Chrome、Safari3.0+和Opera9+都支持DOMContentLoaded事件，通常這個事件既可以添加事件處理程序，也可以執(zhí)行其他DOM操作。這個事件始終都會在load事件之前觸發(fā)。

內(nèi)存和性能

為頁面添加大量的處理程序?qū)⒔档晚撁娴恼w運行性能。導致這一問題的原因是多方面的。首先，每個函數(shù)都是對象，都會占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導致的DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。

事件委托

對"事件處理程序過多"問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click事件會一直冒泡到document層次。也就是說，可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。

最適合采用事件委托技術(shù)的事件包括click、mousedown、mouseup、keydown、keyup和keypress。雖然mouseover和mouseout事件也冒泡，但要適當處理他們并不容易，而且經(jīng)常需要計算元素的位置（因為當鼠標從一個元素移到其子節(jié)點時，或者當鼠標移出該元素時，都會觸發(fā)mouseout事件）。

移除事件處理程序

每當將事件處理程序指定給元素時，運行中的瀏覽器代碼與支持頁面交互的JavaScript代碼之間就會建立一個連接。當事件處理程序不再使用時，應(yīng)該在適當?shù)臅r機將其去除。

模擬事件

事件，就是網(wǎng)頁中某個特別值得關(guān)注的瞬間。事件經(jīng)常由用戶操作或通過其他瀏覽器功能來觸發(fā)。但很少有人知道，可以使用JavaScript在任意時刻來觸發(fā)特定的事件，而此時的事件就如同瀏覽器創(chuàng)建的事件一樣。也就是說，這些事件該冒泡還會冒泡，而且按照能夠?qū)е聻g覽器執(zhí)行已經(jīng)指定的處理他們的事件處理程序。在測試Web應(yīng)用程序，模擬觸發(fā)事件是一種極其有用的技術(shù)。DOM2級規(guī)范為此規(guī)定了模擬特定事件的方式。IE9，Opera、Firefox、Chrome和Safari都支持這種方式。IE有它自己模擬事件的方式。

DOM中的事件模擬

可以在document對象上使用createEvent()方法創(chuàng)建event對象。這個方法接收一個參數(shù)，即表示要創(chuàng)建的事件類型的字符串。在DOM2級中，所有這些字符串都使用英文復數(shù)形式，而在DOM3級中都變成了單數(shù)。這個字符串可以是下列幾個字符串之一：UIEvents、MouseEvents、MutationEvents和HTMLEvents。

創(chuàng)建完成事件對象后，可以調(diào)用事件對象的initXXX()方法，為該事件對象指定具體的屬性，然后調(diào)用HTML對象的dispatchEvent()方法完成事件的模擬，如：

var btn = document.getElementById("myBtn");

var event = document.createEvent("MouseEvents");

event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);

btn.dispatchEvent(event);

者：京東科技孫凱

一、前言

相信很多前端開發(fā)者在做項目時同時也都做過頁面性能優(yōu)化，這不單是前端的必備職業(yè)技能，也是考驗一個前端基礎(chǔ)是否扎實的考點，而性能指標也通常是每一個開發(fā)者的績效之一。尤其馬上接近年關(guān)，頁面白屏時間是否過長、首屏加載速度是否達標、動畫是否能流暢運行，諸如此類關(guān)于性能更具體的指標和感受，很可能也是決定著年底你能拿多少年終獎回家過年的晴雨表。

關(guān)于性能優(yōu)化，我們一般從以下四個方面考慮：

開發(fā)時性能優(yōu)化
編譯時性能優(yōu)化
加載時性能優(yōu)化
運行時性能優(yōu)化

而本文將從第三個方面展開，講一講哪些因素將影響到頁面加載總時長，談到總時長，那總是避免不了要談及 window.onload，這不但是本文的重點，也是常見頁面性能監(jiān)控工具中必要的API之一，如果你對自己頁面加載的總時長不滿意，歡迎讀完本文后在評論區(qū)交流。

二、關(guān)于 window.onload

這個掛載到 window 上的方法，是我剛接觸前端時就掌握的技能，我記得尤為深刻，當時老師說，“對于初學者，只要在這個方法里寫邏輯，一定沒錯兒，它是整個文檔加載完畢后執(zhí)行的生命周期函數(shù)”，于是從那之后，幾乎所有的練習demo，我都寫在這里，也確實沒出過錯。

在 MDN 上，關(guān)于 onload 的解釋是這樣的：load 事件在整個頁面及所有依賴資源如樣式表和圖片都已完成加載時觸發(fā)。它與 DOMContentLoaded 不同，后者只要頁面 DOM 加載完成就觸發(fā)，無需等待依賴資源的加載。該事件不可取消，也不會冒泡。

后來隨著前端知識的不斷擴充，這個方法后來因為有了“更先進”的 DOMContentLoaded，在我的代碼里而逐漸被替代了，目前除了一些極其特殊的情況，否則我?guī)缀鹾茈y用到 window.onload 這個API，直到認識到它影響到頁面加載的整體時長指標，我才又一次拾起來它。

三、哪些因素會影響 window.onload

本章節(jié)主要會通過幾個常用的業(yè)務(wù)場景展開描述，但是有個前提，就是如何準確記錄各種類型資源加載耗時對頁面整體加載的影響，為此，有必要先介紹一下前提。

為了準確描述資源加載耗時，我在本地環(huán)境啟動了一個用于資源請求的 node 服務(wù)，所有的資源都會從這個服務(wù)中獲取，之所以不用遠程服務(wù)器資源的有主要原因是，使用本地服務(wù)的資源可以在訪問的資源鏈接中設(shè)置延遲時間，如訪問腳本資源 http://localhost:3010/index.js?delay=300，因鏈接中存在 delay=300，即可使資源在300毫秒后返回，這樣即可準確控制每個資源加載的時間。

以下是 node 資源請求服務(wù)延遲相關(guān)代碼，僅僅是一個中間件：

const express = require("express")
const app = express()

app.use(function (req, res, next) {
    Number(req.query.delay) > 0
        ? setTimeout(next, req.query.delay)
        : next()
})

場景一：使用 async 異步加載腳本場景對 onload 的影響
示例代碼：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>test</title>

      <!-- 請求時長為1秒的js資源 -->
      <script src="http://localhost:3010/index.js?delay=1000" async></script>
  </head>
  <body>
  </body>
  </html>

瀏覽器表現(xiàn)如下：

通過上圖可以看到，瀑布圖中深藍色豎線表示觸發(fā)了 DOMContentLoaded 事件，而紅色豎線表示觸發(fā)了 window.onload 事件（下文中無特殊情況，不會再進行特殊標識），由圖可以得知使用了 async 屬性進行腳本的異步加載，仍會影響頁面加載總體時長。

場景二：使用 defer 異步加載腳本場景對 onload 的影響
示例代碼：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>test</title>

      <!-- 請求時長為1秒的js資源 -->
      <script src="http://localhost:3010/index.js?delay=1000" defer></script>
  </head>
  <body>
  </body>
  </html>

瀏覽器表現(xiàn)如下：

由圖可以得知使用了 defer 屬性進行腳本的異步加載，除了正常的在 DOMContentLoaded 之后觸發(fā)腳本執(zhí)行，也影響頁面加載總體時長。

場景三：異步腳本中再次加載腳本，也就是常見的動態(tài)加載腳本、樣式資源的情況
html 代碼保持不變，index.js內(nèi)示例代碼：

const script = document.createElement('script')

// 請求時長為0.6秒的js資源
script.src = 'http://localhost:3010/index2.js?delay=600'
script.onload = () => {
    console.log('js 2 異步加載完畢')
}
document.body.appendChild(script)

結(jié)果如下：

從瀑布圖可以看出，資源的連續(xù)加載，導致了onload事件整體延后了，這也是我們再頁面中非常常見的一種操作，通常懶加載一些不重要或者首屏外的資源，其實這樣也會導致頁面整體指標的下降。

不過值得強調(diào)的一點是，這里有個有意思的地方，如果我們把上述代碼進行改造，刪除最后一行的 document.body.appendChild(script)，發(fā)現(xiàn) index2 的資源請求并沒有發(fā)出，也就是說，腳本元素不向頁面中插入，腳本的請求是不會發(fā)出的，但是也會有反例，這個我們下面再說。

在本示例中，后來我又把腳本請求換成了 css 請求，結(jié)果是一致的。

場景四：圖片的懶加載/預加載
html 保持不變，index.js 用于加載圖片，內(nèi)容如下：

const img = document.createElement('img')

// 請求時長為0.5秒的圖片資源
img.src = 'http://localhost:3010/index.png?delay=500'
document.body.appendChild(img)

結(jié)果示意：

表現(xiàn)是與場景三一樣的，這個不再多說，但是有意思的來了，不一樣的是，經(jīng)過測試發(fā)現(xiàn)，哪怕刪除最后一行代碼：document.body.appendChild(img)，不向頁面中插入元素，圖片也會發(fā)出請求，也同樣延長了頁面加載時長，所以部分同學就要注意了，這是一把雙刃劍：當你真的需要懶加載圖片時，可以少寫最后一行插入元素的代碼了，但是如果大量的圖片加載請求發(fā)出，哪怕不向頁面插入圖片，也真的會拖慢頁面的時長。

趁著這個場景，再多說一句，一些埋點數(shù)據(jù)的上報，也正是借著圖片有不需要插入dom即可發(fā)送請求的特性，實現(xiàn)成功上傳的。

場景五：普通接口請求
html 保持不變，index.js 內(nèi)容如下：

// 請求時長為500毫秒的請求接口
fetch('http://localhost:3010/api?delay=500')

結(jié)果如下圖：

可以發(fā)現(xiàn)普通接口請求的發(fā)出，并不會影響頁面加載，但是我們再把場景弄復雜一些，見場景六。

場景六：同時加載樣式、腳本，腳本加載完成后，內(nèi)部http接口請求，等請求結(jié)果返回后，再發(fā)出圖片請求或修改dom，這也是更貼近生產(chǎn)環(huán)境的真實場景
html 代碼：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <!-- 請求時長為1.2秒的css -->
    <link rel="stylesheet" href="http://localhost:3010/index.css?delay=1200">

    <!-- 請求時長為0.4秒的js -->
    <script src="http://localhost:3010/index.js?delay=400" async></script>
</head>
<body>
</body>
</html>

index.js 代碼：

async function getImage () {
    // 請求時長為0.5秒的接口請求
    await fetch('http://localhost:3010/api?delay=500')

    const img = document.createElement('img')
    // 請求時長為0.5秒的圖片資源
    img.src = 'http://localhost:3010/index.png?delay=500'
    document.body.appendChild(img)

}

getImage()

結(jié)果圖如下：

如圖所示，結(jié)合場景五記的結(jié)果，雖然普通的 api 請求并不會影響頁面加載時長，但是因為api請求過后，重新請求了圖片資源（或大量操作 dom），依然會導致頁面加載時間變長。這也是我們?nèi)粘ｉ_發(fā)中最常見的場景，頁面加載了js，js發(fā)出網(wǎng)絡(luò)請求，用于獲取頁面渲染數(shù)據(jù)，頁面渲染時加載圖片或進行dom操作。

場景七：頁面多媒體資源的加載
示例代碼：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <video src="http://localhost:3010/video.mp4?delay=500" controls></video>
</body>
</html>

結(jié)果如圖：

對于視頻這種多媒體資源的加載比較有意思，video 標簽對于資源的加載是默認開啟 preload 的，所以資源會默認進行網(wǎng)絡(luò)請求（如需關(guān)閉，要把 preload 設(shè)置為 none ），可以看到紅色豎線基本處于圖中綠色條和藍色條中間（實際上更偏右一些），圖片綠色部分代表資源等待時長，藍色部分代表資源真正的加載時長，且藍色加載條在onload的豎線右側(cè)，這說明多媒體的資源確實影響了 onload 時長，但是又沒完全影響，因為設(shè)置了500ms的延遲返回資源，所以 onload 也被延遲了500ms左右，但一旦視頻真正開始下載，這段時長已經(jīng)不記錄在 onload 的時長中了。

其實這種行為也算合理，畢竟多媒體資源通常很大，占用的帶寬也多，如果一直延遲 onload，意味著很多依賴 onload 的事件都無法及時觸發(fā)。

接下來我們把這種情況再復雜一些，貼近實際的生產(chǎn)場景，通常video元素是包含封面圖 poster 屬性的，我們設(shè)置一張延遲1秒的封面圖，看看會發(fā)生什么，結(jié)果如下：

不出意外，果然封面圖影響了整體的加載時長，魔鬼都在細節(jié)中，封面圖也需要注意優(yōu)化壓縮。

場景八：異步腳本和樣式資源一同請求
示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <!-- 請求時長為1秒的css -->
    <link rel="stylesheet" href="http://localhost:3010/index.css?delay=1000">

    <!-- 請求時長為0.5秒的js -->
    <script src="http://localhost:3010/index.js?delay=500" async></script>
</head>
<body>
</body>
</html>

瀏覽器表現(xiàn)如下：

可以看出 css 資源雖然沒有阻塞腳本的加載，但是卻延遲了整體頁面加載時長，其中原因是css資源的加載會影響 render tree 的生成，導致頁面遲遲不能完成渲染。
如果嘗試把 async 換成 defer，或者干脆使用同步的方式加載腳本，結(jié)果也是一樣，因結(jié)果相同，本處不再舉例。

場景九：樣式資源先請求，再執(zhí)行內(nèi)聯(lián)腳本邏輯，最后加載異步腳本
我們把場景八的代碼做一個改造，在樣式標簽和異步腳本標簽之間，加上一個只包含空格的內(nèi)聯(lián)腳本，讓我們看看會發(fā)生什么，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        console.log('頁面js 開始執(zhí)行')
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <!-- 請求時長為1秒的css -->
    <link rel="stylesheet" href="http://localhost:3010/index.css?delay=2000">

    <!-- 此標簽僅有一個空格 -->
    <script> </script>

    <!-- 請求時長為0.5秒的js -->
    <script src="http://localhost:3010/index.js?delay=500" async></script>
</head>
<body>
</body>
</html>

index.js 中的內(nèi)容如下：

console.log("腳本 js 開始執(zhí)行");

結(jié)果如下，這是一張 GIF，加載可能有點慢：

這個結(jié)果非常有意思，他到底發(fā)生了什么呢？

腳本請求是0.5秒的延遲，樣式請求是2秒
腳本資源是 async 的請求，異步發(fā)出，應(yīng)該什么時候加載完什么時候執(zhí)行
但是圖中的結(jié)果卻是等待樣式資源加載完畢后才執(zhí)行

答案就在那個僅有一個空格的腳本標簽中，經(jīng)反復測試，如果把標簽換成注釋，也會出現(xiàn)一樣的現(xiàn)象，如果是一個完全空的標簽，或者根本沒有這個腳本標簽，那下方的index.js 通過 async 異步加載，并不會違反直覺，加載完畢后直接執(zhí)行了，所以這是為什么呢？

這其實是因為樣式資源下方的 script 雖然僅有一個空格，但是被瀏覽器認為了它內(nèi)部可能是包含邏輯，一定概率會存在樣式的修改、更新 dom 結(jié)構(gòu)等操作，因為樣式資源沒有加載完（被延遲了2秒），導致同步 js （只有一個空格的腳本）的執(zhí)行被阻塞了，眾所周知頁面的渲染和運行是單線程的，既然前面已經(jīng)有了一個未執(zhí)行完成的 js，所以也導致了后面異步加載的 js 需要在隊列中等待。這也就是為什么 async 雖然異步加載了，但是沒有在加載后立即執(zhí)行的原因。

場景十：字體資源的加載
示例代碼：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        @font-face {
            font-family: font-custom;
            src: url('http://localhost:3010/font.ttf?delay=500');
        }

        body {
            font-family: font-custom;
        }
    </style>
</head>
<body></body>
</html>

結(jié)果如下：

可以看到，此情況下字體的加載是對 onload 有影響的，然后我們又測試了一下只聲明字體、不使用的情況，也就是刪除上面代碼中 body 設(shè)置的字體，發(fā)現(xiàn)這種情況下，字體是不會發(fā)出請求的，僅僅是造成了代碼的冗余。

四、總結(jié)

前面列舉了大量的案例，接下來我們做個總結(jié)，實質(zhì)性影響 onload 其實就是幾個方面。

圖片資源的影響毋庸置疑，無論是在頁面中直接加載，還是通過 js 懶加載，只要加載過程是在 onload 之前，都會導致頁面 onload 時長增加。
多媒體資源的等待時長會被記入 onload，但是實際加載過程不會。
字體資源的加載會影響 onload。
網(wǎng)絡(luò)接口請求，不會影響 onload，但需要注意的是接口返回后，如果此時頁面還未 onload，又進行了圖片或者dom操作，是會導致 onload 延后的。
樣式不會影響腳本的加載和解析，只會阻塞腳本的執(zhí)行。
異步腳本請求不會影響頁面解析，但是腳本的執(zhí)行同樣影響 onload。

五、優(yōu)化舉措

圖片或其他資源的預加載可以通過 preload 或 prefetch 請求，這兩種方式都不會影響 onload 時長。
一定注意壓縮圖片，頁面中圖片的加載速度可能對整體時長有決定性影響。
盡量不要做串行請求，沒有依賴關(guān)系的情況下，推薦并行。
中文字體包非常大，可以使用字蛛壓縮、或用圖片代替。
靜態(tài)資源上 cdn 很重要，壓縮也很重要。
刪除你認為可有可無的代碼，沒準哪一行代碼就會影響加載速度，并且可能很難排查。
視頻資源如果在首屏以外，不要開啟預加載，合理使用視頻的 preload 屬性。
async 和 defer 記得用，很好用。
非必要的內(nèi)容，可以在 onload 之后執(zhí)行，是時候重新拾起來這個 api 了。

在線咨詢

上一篇：HTML教程（看完這篇就夠了）
下一篇：小白學習HTML5的思路是什么？該如何入門？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML DOM-事件

一、前言

二、關(guān)于 window.onload

三、哪些因素會影響 window.onload

四、總結(jié)

五、優(yōu)化舉措

您的項目需求