當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript学习九、事件

發(fā)布時(shí)間：2025/5/22 javascript 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习九、事件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。事件，就是文檔或者瀏覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂脗陕犉?#xff08;或處理程序）來預(yù)定事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。類似于設(shè)計(jì)模式中的觀察員模式。支持頁面的行為與頁面的外觀之間的松散耦合。

事件流

?事件流描述的是從頁面中接收事件的順序。

IE和 Netscape 開發(fā)團(tuán)隊(duì)居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕獲流。

1.事件冒泡

IE的事件流叫做事件冒泡（event bubbling），即事件開始時(shí)由最具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)（文檔）。

<!DOCTYPE html> <html> <head><title>event js</title> </head> <body><div id="myDiv">Click Me</div> </body> </html>

上例中，如果你點(diǎn)擊了頁面中的div 元素，那么這個(gè)click 事件會按照如下順序傳播：

<div>

<body>

<html>

document

也就是說，click事件首先在<div> 元素上發(fā)生，而這個(gè)元素就是我們單機(jī)的元素。然后，click事件沿著DOM樹向上傳播，在每一級節(jié)點(diǎn)上都會發(fā)生，知道傳播到 document 對象。

所有現(xiàn)代瀏覽器都支持事件冒泡，但在具體實(shí)現(xiàn)上還有一些差別。IE 5.5 及更早的版本中的事件冒泡會跳過<html> 元素。IE9、firefox、 Chrome 和 Safari 則將事件一直冒泡到 window 對象。

2.事件捕獲

Netscape Communicator 團(tuán)隊(duì)提出的另一種事件流叫做事件捕獲（event capturing）。事件波活的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件事件捕獲的用意在于它事件到達(dá)預(yù)定目標(biāo)之前捕獲它。仍然以上面的html 頁面作為演示事件捕獲的例子。那么單擊<div>元素就會以下列順序除法click 事件。

document

<html>

<body>

<div>

在事件捕獲過程中，document 對象首先接收到click 事件，然后事件沿著 DOM 樹依次向下，一直傳播到事件的實(shí)際目標(biāo)，即<div> 元素。

雖然事件捕獲是 Netscape Communicator 唯一支持的事件流模型，但I(xiàn)E9、Safari、Chrome、Opera 和 Firefox 目前也支持這種事件流模型。進(jìn)管DOM2 及事件規(guī)范要求事件應(yīng)該從document 對象開始傳播，但這些瀏覽器都是從 window 對象開始捕獲事件的。

由于老版本的瀏覽器不支持，因此很少有人使用事件捕獲。所以建議使用事件冒泡，在有特殊需要是在使用事件捕獲。

?3.DOM事件流

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

事件處理程序

?事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動作。諸如 click、load、mouseover，都是事件的名字，而相應(yīng)某個(gè)事件的函數(shù)就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以on 開頭，因此 click 事件的事件處理程序就是 onclick，以此類推。

?1.某個(gè)元素支持的每種事件，都可以使用一個(gè)與相應(yīng)事件處理程序同名的HTML 特性來制定。這個(gè)特性的值應(yīng)該是能夠執(zhí)行的 JavaScript 代碼。

<div id="myDiv" onclick="alert('Clicked')">Click Me</div>

也可以調(diào)用其他地方定義的腳本：

<div id="myDiv" onclick="showMessage()">Click Me</div><script type="text/javascript">function showMessage(){alert("Hello world!");}</script>

在HTML 中指定事件處理程序存在一個(gè)時(shí)差問題：因?yàn)橛脩艨赡軙贖TML 元素一出現(xiàn)在頁面上就觸發(fā)相應(yīng)的事件，但當(dāng)時(shí)的事件可能尚不具備執(zhí)行條件。如上例中，假設(shè)代碼還沒有加載進(jìn)來用戶就點(diǎn)擊了div，就會引發(fā)錯誤。為此，很多HTML 事件處理程序都會被封裝在一個(gè)try-catch 塊中，以便錯誤不會浮出水面。

<div id="myDiv" onclick="try{showMessage();}catch(ex){}">Click Me</div>

還有一個(gè)缺點(diǎn)是HTML 與 JavaScript 代碼緊密耦合。如果要更換事件處理程序，就要改動兩個(gè)地方：HTML 代碼和 JavaScript 代碼。這正是許多開發(fā)人員摒棄HTML 事件處理程序，轉(zhuǎn)而使用JavaScript 制定事件處理程序的原因。

2.DOM0 級事件處理程序

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

var div = document.getElementById("myDiv");div.onclick = function(){alert("click");}

使用DOM0 級方法制定的事件處理程序被認(rèn)為是元素的方法。因此這時(shí)候的事件處理程序是在元素的作用域中運(yùn)行，所以承諾須中的this 引用當(dāng)前元素。

　　var div = document.getElementById("myDiv");div.onclick = function(){alert(this.id); //myDiv}

可以通過將事件處理程序?qū)傩缘闹翟O(shè)置為null 來刪除通過DOM0 級方法制定的事件處理程序。

div.onclick = null;

3.DOM2 級事件處理程序

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

var div = document.getElementById("myDiv");div.addEventListener("click", function(){alert(this.id);}, false);

使用DOM2 級方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序。

var div = document.getElementById("myDiv");div.addEventListener("click", function(){alert(this.id);}, false);div.addEventListener("click", function(){alert("hello world");}, false);

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

var div = document.getElementById("myDiv");var handler = function(){alert(this.id);}div.addEventListener("click", handler, false);div.removeEventListener("click", handler, false);

大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器。最好只在需要在事件到達(dá)目標(biāo)之前截獲它的時(shí)候才將事件處理程序添加到捕獲階段。如果不是特別需要，不建議在事件捕獲階段注冊事件處理程序。

?4.IE 事件處理程序

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

div.attachEvent("onclick", function(){alert("clicked");});

?在IE中使用attachEvent() 與使用DOM0 級方法的主要區(qū)別在于事件處理程序的作用域。在使用DOM0級方法的情況下，事件處理程序會在其所屬元素作用域中運(yùn)行；在使用attachEvent() 方法的情況下，事件處理程序會在全局作用域中運(yùn)行，因此this 等于 window。

同樣，通過attachEvent() 方法添加的匿名函數(shù)無法通過detachEvent() 來移除，detachEvent() 同attachEvent() 方法的參數(shù)是一樣的。

5.跨瀏覽器的事件處理程序

只要恰當(dāng)?shù)氖褂媚芰z測，就可以編寫自己的跨瀏覽器的方式處理事件。只需要關(guān)注冒泡階段。

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

與 addHandler() 對應(yīng)的方法是 removeHandler() ，它也接受相同的參數(shù)。這個(gè)方法的職責(zé)是移除之前添加的事件處理程序。

事件對象

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

1.DOM中的事件對象

兼容DOM的瀏覽器會將一個(gè) event 對象傳入到事件處理程序中。無論指定事件處理程序時(shí)使用什么方法（DOM0級或DOM2級），都會傳入event對象。

event 對象包含與創(chuàng)建它的特定事件有關(guān)的屬性和方法。觸發(fā)的事件類型不一樣，可用的屬性和方法也不一樣。不過所有事件都會有下列成員。

屬性/方法	類型	讀/寫	說明
currentTarget	Element	只讀	其事件處理程序當(dāng)前正在處理事件的那個(gè)元素。
target	Element	只讀	事件的目標(biāo)。
type	String	只讀	被觸發(fā)的事件類型。
bubbles	Boolean	只讀	表明事件是否冒泡。
stopImmediatePropagation()	Function	只讀	取消事件的進(jìn)一步捕獲或冒泡，同時(shí)組織任何事件處理程序被調(diào)用（DOM3 級事件中新增）
stopPropagation()	Function	只讀	取消事件的進(jìn)一步捕獲或冒泡。如果bubbles 為 true，則可以使用這個(gè)方法。
eventPhase	Integer	只讀	調(diào)用事件處理程序的階段：1表示捕獲階段，2表示“處于目標(biāo)”，3表示冒泡階段。
cancelable	Boolean	只讀	表明是否可以取消事件的默認(rèn)行為。
preventDefault()	Function	只讀	取消事件的默認(rèn)行為。如果cancelable 是 true，則可以使用這個(gè)方法。
defaultPrevented	Boolean	只讀	為true 表示已經(jīng)調(diào)用了 preventDefault() （DOM3 級事件中新增）。
detail	Integer	只讀	與事件相關(guān)的細(xì)節(jié)信息。
trusted	Element	只讀	為true 表示見見是瀏覽器生成的。為false 表示事件是由開發(fā)人員通過調(diào)用JavaScript創(chuàng)建的（DOM3級事件中新增）。
view	AbstractView	只讀	與事件關(guān)聯(lián)的抽象視圖。等同于發(fā)生事件的 window 對象。

在事件處理程序內(nèi)部，對象this 始終等于 currentTarget 的值，而 target 則只包含事件的實(shí)際目標(biāo)。如果直接將事件處理程序指定給了目標(biāo)元素，則this、currentTarget 和 target 包含相同的值。

var div = document.getElementById("myDiv");div.onclick = function(event){alert(event.currentTarget === this); //truealert(event.target === this); //true};

如果事件處理程序存在于節(jié)點(diǎn)的父節(jié)點(diǎn)中，那么currentTarget、this 將代表父節(jié)點(diǎn)，而target 表示的是子節(jié)點(diǎn)。

var div = document.getElementById("myDiv");document.body.onclick = function(event){alert(event.currentTarget === this); //truealert(this === document.body); //truealert(event.target === div); //true};

要組織特定事件的默認(rèn)行為，可以使用 preventDefault() 方法。例如，鏈接的默認(rèn)行為就是在被單擊時(shí)會導(dǎo)航到其 href 特性制定的URL。如果你想組織鏈接導(dǎo)航這一默認(rèn)行為，那么通過鏈接的onclick 事件處理程序可以取消它。

var link = document.getElementById("myLink");link.onclick = function(event){event.preventDefault();};

使用 stopPropagation() 方法可以立即停止事件在DOM層次中的傳播，即取消進(jìn)一步的事件捕獲或者冒泡。例如，直接添加到一個(gè)節(jié)點(diǎn)的事件處理程序可以調(diào)用 stopPropagation()，從而避免除法注冊在document.body 上面的事件處理程序。

var div = document.getElementById("myDiv");document.body.onclick = function(event){alert("hello"); //不會執(zhí)行};div.onclick = function(event){event.stopPropagation();alert("propagation stoped");};

只有在事件處理程序執(zhí)行期間，event對象才會存在，一旦事件處理程序執(zhí)行完成，event對象就會被銷毀。

2.IE中的事件對象

與訪問DOM中的event 對象不同，要訪問IE中的event對象有集中不同的方式，取決于指定事件處理程序的方法。在使用DOM0 級方法添加事件處理程序時(shí)， event 對象作為window 對象的一個(gè)屬性存在。

var div = document.getElementById("myDiv");btn.onclick = function(){var event = window.event;alert(event.type); //click};

?如果事件處理程序是使用attachEvent() 添加的，那么會有一個(gè)event 對象作為參數(shù)被傳入事件處理程序函數(shù)中。

var div = document.getElementById("myDiv");div.attachEvent("onclick", function(event){alert(event.type);});

?在像這樣使用attachEvent() 的情況下，也可以通過window 對象來訪問event 對象，就像使用DOM0 級方法時(shí)一樣。不過方便起見，同一個(gè)對象也會作為參數(shù)傳遞。

IE 的 event 對象同樣也包含與創(chuàng)建它的事件相關(guān)的屬性和方法。

屬性/方法	類型	讀/寫	說明
cancelBubble	Boolean	讀/寫	默認(rèn)值為false，但將其設(shè)置為true就可以取消事件冒泡(與DOM中的 stopPropagation() 方法的作用相同)。
returnValue	Boolean	讀/寫	默認(rèn)值為true，但將其設(shè)置為false 就可以取消事件的默認(rèn)行為（與DOM中的preventDefault() 方法的作用相同）。
srcElement	Element	只讀	事件的目標(biāo)（與DOM 中的target 屬性相同）。
type	String	只讀	被觸發(fā)的事件的類型。

?因?yàn)槭录幚沓绦虻淖饔糜蚴歉鶕?jù)制定它的方式來確定的，所以不能認(rèn)為this 會始終你等于事件目標(biāo)，故而，最好還是使用 event.srcElement 比較保險(xiǎn)。

var div = document.getElementById("myDiv");div.onclick = function(){alert(window.event.srcElement === this); // true };div.attachEvent("onclick", function(event){alert(event.srcElement === this); //false});

?3.跨瀏覽器的事件對象

?繼續(xù)補(bǔ)充EventUtil對象，增加對event 對象的支持。

?使用時(shí)需要在頁面中加入引入js文件的代碼，使用方法如下：

<!DOCTYPE html> <html> <head><title>event js</title> </head> <body><div id="myDiv">Click Me</div><script type="text/javascript" src="./eventutil.js"></script><script type="text/javascript">var div = document.getElementById("myDiv");div.onclick = function(event){event = EventUtil.getEvent(event);alert(event.type); //click alert(EventUtil.getTarget(event).id); //myDiv };</script> </body> </html>

事件類型

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

UI（User Interface，用戶界面）事件，當(dāng)用戶與頁面上的元素交互時(shí)觸發(fā)。
焦點(diǎn)事件，當(dāng)元素獲得或失去焦點(diǎn)時(shí)觸發(fā)。
鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面上執(zhí)行操作時(shí)觸發(fā)。
滾輪事件，當(dāng)使用鼠標(biāo)滾輪（或類似設(shè)備）時(shí)觸發(fā)。
文本事件，當(dāng)在文檔中輸入文本時(shí)觸發(fā)。
鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時(shí)觸發(fā)。
合成事件，當(dāng)為IME（Input Method Editor，輸入法編輯器）輸入字符時(shí)觸發(fā)。
變動（mutation）事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化是觸發(fā)。
變動名稱事件，當(dāng)元素或?qū)傩悦儎訒r(shí)觸發(fā)。此類事件已被廢棄，沒有任何瀏覽器實(shí)現(xiàn)它們。

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

1.UI事件

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

load：當(dāng)頁面完全加載后在window 上觸發(fā)，當(dāng)所有框架都加載完畢是在框架集上面觸發(fā)，當(dāng)圖像加載完畢時(shí)在<img>元素上觸發(fā)，或者當(dāng)嵌入的內(nèi)容加載完畢時(shí)在<object> 元素上面觸發(fā)。
unload：當(dāng)頁面完全卸載后在window 上面觸發(fā)，當(dāng)所有框架都卸載后在框架集上面觸發(fā)，或者當(dāng)嵌入的內(nèi)容卸載完畢后在<object>元素上面觸發(fā)。
abort：當(dāng)用戶停止下載過程時(shí)，如果嵌入的內(nèi)容沒有加載完，則在<object>元素上觸發(fā)。
error：當(dāng)發(fā)生JavaScript 錯誤時(shí)在window 上面觸發(fā)，當(dāng)無法加載圖像時(shí)在<img>元素上面觸發(fā)，當(dāng)無法加載嵌入內(nèi)容時(shí)在<object> 元素上面觸發(fā)，或者當(dāng)有一個(gè)或多個(gè)框架無法加載時(shí)在框架集上觸發(fā)。
select：當(dāng)用戶選擇文本框(<input> 或 <texterea>)中的一個(gè)或多個(gè)字符時(shí)觸發(fā)。
resize：當(dāng)窗口或框架的大小變化時(shí)在window 或框架上觸發(fā)。
scroll：當(dāng)用戶滾動帶滾動條的元素中的內(nèi)容時(shí)，在該元素上面觸發(fā)。

以上這些事件在DOM2級事件中都被歸為HTML 事件，要確定瀏覽器是否支持DOM2級事件規(guī)定的HTML事件，可以使用以下代碼：

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

要確定瀏覽器是否支持DOM3級事件定義的事件，可以使用如下代碼:

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

1.1 load事件

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

EventUtil.addHandler(window, "load", function(event){alert("Loaded!");});

這里的event對象不包含有管這個(gè)事件的任何附加信息，但在兼容DOM的瀏覽器中，event.target 屬性的值會被設(shè)置為document，而IE并不會為這個(gè)事件設(shè)置srcElement 屬性。

第二種制定onload事件處理程序的方式是為body元素添加一個(gè)onload 特性，

<!DOCTYPE html> <html> <head><title>event js</title> </head> <body onload="alert('Loaded!')"><div id="myDiv">Click Me</div> </body> </html>

一般來說在window 上面發(fā)生的任何事件都可以在<body> 元素中通過相應(yīng)的特性來指定，因?yàn)樵贖TML中無法訪問window 元素。但是建議盡可能的使用JavaScript 方式。

在創(chuàng)建新的<img>元素時(shí)，可以為其制定一個(gè)事件處理程序，以便圖像加載完畢后給出提示。此時(shí)最重要的是要在指定src屬性之前先指定事件：

EventUtil.addHandler(window, "load", function(event){var image = document.createElement("img");EventUtil.addHandler(image, "load", function(event){event = EventUtil.getEvent(event);alert(EventUtil.getTarget(event).src); //file:///home/zzl/Study/nodejs/studyjs/snal.jpg });document.body.appendChild(image);image.src = "snal.jpg";});

?新圖像元素不一定要從添加到文檔后才開始下載，只要設(shè)置了sr屬性就會開始下載。

?同樣的功能也可以通過使用DOM0 級的Image對象實(shí)現(xiàn)。在DOM出現(xiàn)之前，開發(fā)人員經(jīng)常使用Image 對象在客戶端預(yù)先加載圖像。可以像使用<img>元素一樣使用Image對象，只不過無法將其添加到DOM樹中。

EventUtil.addHandler(window, "load", function(event){var image = new Image(); //document.createElement("img");EventUtil.addHandler(image, "load", function(event){event = EventUtil.getEvent(event);alert(EventUtil.getTarget(event).src); //file:///home/zzl/Study/nodejs/studyjs/snal.jpg });document.body.appendChild(image);image.src = "snal.jpg";});

?有的瀏覽器將Image對象實(shí)現(xiàn)為<img>元素，但并非所有瀏覽器都如此，所以最好將他們區(qū)別對待。

1.2 unload 事件

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

同load事件類似，也有兩種制定onunload 事件處理程序的方式。第一種是使用JavaScript：

EventUtil.addHandler(window, "unload", function(event){alert("Unloaded!");});

具體來說，當(dāng)發(fā)生以下情況時(shí)，會發(fā)出 unload 事件：

點(diǎn)擊某個(gè)離開頁面的鏈接
在地址欄中鍵入了新的 URL
使用前進(jìn)或后退按鈕
關(guān)閉瀏覽器
重新加載頁面

但是實(shí)際上，這行代碼并沒有執(zhí)行，查了很多資料發(fā)現(xiàn)，因?yàn)閛nunload函數(shù)是在body已經(jīng)關(guān)閉后才調(diào)動的，所以如果使用alert的話(alert父窗口是body)就會報(bào)錯或不顯示！

第二種方法仍然是在<body>元素添加一個(gè)特性（與load事件類似）。

<!DOCTYPE html> <html> <head><title>event js</title> </head> <body onunload="alert('Unloaded!')"><div id="myDiv">Click Me</div> </body> </html>

1.3. resize事件

當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí)，就會觸發(fā)resize 事件。這個(gè)事件是在window 窗口上觸發(fā)。

關(guān)于何時(shí)會觸發(fā)resize 事件，不同瀏覽器有不同的機(jī)制，IE、Safari、Chrome和Opera 會在瀏覽器窗口變化了1像素時(shí)就觸發(fā)resize事件，然后隨著變化不斷重復(fù)觸發(fā)。Firefox則最實(shí)惠在用戶停止調(diào)整窗口大小是才會觸發(fā)resize事件。所以應(yīng)該注意不要在這個(gè)事件中添加大計(jì)算量的代碼，因?yàn)檫@些代碼有可能被頻繁執(zhí)行，從而導(dǎo)致瀏覽器反應(yīng)明顯變慢。

?2.焦點(diǎn)事件

焦點(diǎn)事件會在頁面元素獲得或時(shí)區(qū)焦點(diǎn)是觸發(fā)。利用這個(gè)事件并與 document.hasFocus() 方法及 document.activeElement 屬性配合，可以直銷用戶在頁面上的行蹤。

blur：在元素失去焦點(diǎn)是觸發(fā)。這個(gè)事件不會冒泡，所有的瀏覽器都支持它。在失去焦點(diǎn)的元素上觸發(fā)。
focus：在元素獲得焦點(diǎn)時(shí)觸發(fā)。這個(gè)事件不會冒泡，所有瀏覽器都支持它。在獲得焦點(diǎn)的元素上觸發(fā)。
focusin：在元素獲得焦點(diǎn)時(shí)觸發(fā)。這個(gè)事件與HTML 事件 focus 等價(jià)，但它冒泡。支持這個(gè)事件的瀏覽器有IE5.5+、Safari 5.1+、Opera 11.5+ 和 Chrome。在獲得焦點(diǎn)的元素上觸發(fā)。
focusout：在元素失去焦點(diǎn)時(shí)觸發(fā)。這個(gè)事件是HTML 事件 blur 的通用版本。冒泡。支持這個(gè)事件的瀏覽器有IE5.5+、Safari 5.1+、Opera 11.5+ 和 Chrome。在失去焦點(diǎn)的元素上觸發(fā)。

3.鼠標(biāo)與滾輪事件

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

click：在用戶單機(jī)主鼠標(biāo)按鈕（一般是左邊的按鈕）或者按下回車鍵時(shí)觸發(fā)。這一點(diǎn)對于確保易訪問性很重要，意味著onclick 事件處理程序既可以通過鍵盤可以通過鼠標(biāo)執(zhí)行。
dblclick：在用戶雙擊主鼠標(biāo)按鈕（一般是左邊的按鈕）時(shí)觸發(fā)。
mousedown：在用戶按下了任意鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseup：在用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動到元素范圍之內(nèi)時(shí)觸發(fā)。這個(gè)事件不冒泡，而且在光標(biāo)移動到后代元素上不會觸發(fā)。
mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動元素范圍之外時(shí)觸發(fā)。這個(gè)事件不冒泡，而且在光標(biāo)移動的后代元素上不會觸發(fā)。
mouseout：在鼠標(biāo)指針位于一個(gè)元素上方，然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)。又移入另一個(gè)元素可能位于前一個(gè)元素的外部，也可能是這個(gè)元素的子元素。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseover：在鼠標(biāo)指針位于一個(gè)元素外部，然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動是重復(fù)地觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。

只有在同一個(gè)元素上相機(jī)觸發(fā)mousedown 和 mouseup 事件，才會觸發(fā) click 事件；如果mousedown 或 mouseup 中的一個(gè)被取消，就不會觸發(fā)click 事件。類似的，只有觸發(fā)兩次click 事件，才會觸發(fā)一次 dblclick 事件，如果有代碼阻止了連續(xù)兩次觸發(fā)click，那么就不會觸發(fā)dblclick 事件了。這四個(gè)事件觸發(fā)的順序始終如下：

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

<!DOCTYPE html> <html> <head><title>event js</title> </head> <body><div id="myDiv">Click Me</div><div id="consol"></div><script type="text/javascript" src="./eventutil.js"></script><script type="text/javascript">var click = document.getElementById("myDiv");var info = document.getElementById("consol");EventUtil.addHandler(click, "click", function(event){var p = document.createElement("p");p.appendChild(document.createTextNode("clicked"));info.appendChild(p);});EventUtil.addHandler(click, "mousedown", function(event){var p = document.createElement("p");p.appendChild(document.createTextNode("mousedowned"));info.appendChild(p);});EventUtil.addHandler(click, "mouseup", function(event){var p = document.createElement("p");p.appendChild(document.createTextNode("mouseuped"));info.appendChild(p);});EventUtil.addHandler(click, "dblclick", function(event){var p = document.createElement("p");p.appendChild(document.createTextNode("dblclicked"));info.appendChild(p);});</script> </body> </html>

?雙擊后輸出樣式如下：

鼠標(biāo)事件中還有一類滾輪事件，其實(shí)就是一個(gè)mousewheel 事件。稍后介紹。

3.1. 客戶區(qū)坐標(biāo)位置

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

EventUtil.addHandler(click, "click", function(event){var p = document.createElement("p");event = EventUtil.getEvent(event);p.appendChild(document.createTextNode("Client coordinates: " + event.clientX + ", " + event.clientY));info.appendChild(p);});

3.2. 頁面坐標(biāo)位置

頁面坐標(biāo)位置表示的坐標(biāo)是從頁面本身而非視口左邊和頂邊計(jì)算的，用pageX 和 pageY 表示。

EventUtil.addHandler(click, "click", function(event){var p1 = document.createElement("p");event = EventUtil.getEvent(event);p1.appendChild(document.createTextNode("Client coordinates: " + event.clientX + ", " + event.clientY));var p2 = document.createElement("p");p2.appendChild(document.createTextNode("Page coordinates: " + event.pageX + ", " + event.pageY));info.appendChild(p1);info.appendChild(p2);});

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

3.3. 屏幕坐標(biāo)位置

這個(gè)位置是相對于整個(gè)電腦屏幕的位置。通過screenX 和 screenY 屬性表示。

3.4.修改鍵

雖然鼠標(biāo)事件主要是使用鼠標(biāo)來觸發(fā)的，但在按下鼠標(biāo)時(shí)鍵盤上的某些鍵的狀態(tài)也可以影響到所要采取的操作。這些修改鍵就是 Shift、Ctrl、Alt、Meta（在windows鍵盤中是windows鍵，在蘋果機(jī)中是 Cmd鍵），他們經(jīng)常被用來修改鼠標(biāo)事件的行為。DOM為此規(guī)定了四個(gè)屬性,表示這些修改鍵的狀態(tài)：shiftKey、ctrlKey、altKey 和 metaKey。這些屬性包含的都是布爾值，true表示相應(yīng)的鍵被按下，反之則為false。

?3.5. 相關(guān)元素

在發(fā)生mouseover 和 mouseout 事件時(shí)，還會涉及更多的元素。這兩個(gè)事件都會涉及把鼠標(biāo)指針從一個(gè)元素的邊界之內(nèi)移動到另一個(gè)元素的邊界之內(nèi)。

對mouseover事件而言，事件的主要目標(biāo)是獲得光標(biāo)的元素，而相關(guān)元素就是哪個(gè)失去光標(biāo)的元素。類似的，對mouseout事件而言，事件的主目標(biāo)是失去光標(biāo)的元素，而相關(guān)的元素則是獲得光標(biāo)的元素。

DOM通過event 對象的 relatedTarget 屬性提供了相關(guān)元素的信息。這個(gè)屬性只對于mouseover 和 mouseout 事件才包含值；對于其他事件，這個(gè)屬性的值是null。 IE8 及之前的版本不支持relatedTarget屬性，但提供了保存著同樣信息的不同屬性。在mouseover事件中 fromElement 屬性中保存了相關(guān)元素；在mouseout 事件中 toElement 屬性中保存著相關(guān)元素。

添加到EventUtil 對象中，以實(shí)現(xiàn)跨瀏覽器取得相關(guān)元素：

使用方法如下：

var div = document.getElementById("myDiv");EventUtil.addHandler(div, "mouseover", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);var relatedTarget = EventUtil.getRelatedTarget(event);alert("Mouse move from " + relatedTarget.tagName + " to " + target.tagName); //Mouse move from HTML to DIV});

3.6. 鼠標(biāo)按鈕

只有在主鼠標(biāo)按鈕被單擊（或鍵盤回車鍵被按下）才會觸發(fā)click 事件，因此檢測按鈕的信息并不必要。但對于mousedown 和 mouseup 事件來說，則在其event 對象存在一個(gè)button 屬性，表示按下或釋放的按鈕。DOM的button 屬性可能有如下3個(gè)值：

0：表示主鼠標(biāo)按鈕；
1：表示中間的鼠標(biāo)按鈕（鼠標(biāo)滾輪按鈕）；
2：表示次鼠標(biāo)按鈕。

IE8 及之前版本也提供了button 屬性，但這個(gè)屬性的值與DOM 的button 屬性大相徑庭。

0：表示沒有按下按鈕；
1：表示按下了主鼠標(biāo)按鈕；
2：表示按下了次鼠標(biāo)按鈕；
3：表示同時(shí)按下了主次鼠標(biāo)按鈕；
4：表示按下了中間的鼠標(biāo)按鈕；
5：表示同時(shí)按下了主鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕；
6：表示同時(shí)按下了次鼠標(biāo)按鈕和中間的鼠標(biāo)按鈕；
7：表示同事按下了三個(gè)鼠標(biāo)按鈕。

由于單獨(dú)使用能力檢測無法確定差異（兩種模型有同名的button 屬性），因此可以通過檢測瀏覽器是否支持DOM版鼠標(biāo)事件來判斷是否IE瀏覽器。

?3.7 觸摸設(shè)備

iOS 和 Android 設(shè)備的實(shí)現(xiàn)非常特別，因?yàn)檫@些設(shè)備沒有鼠標(biāo)。在面向iPhone和 iPad 中的Safari 開發(fā)是，要記住：

不支持dblclick 事件。雙擊瀏覽器窗口會放大畫面，而且沒有辦法改變該行為；
輕擊可單擊元素會觸發(fā) mousemove 事件。如果此操作會導(dǎo)致內(nèi)容變化，將不在有其他事件發(fā)生；如果屏幕沒有因此變化，那么會一次發(fā)生mousedown、mouseup 和 click 事件。輕擊不可單擊的元素不會觸發(fā)任何事件?？蓡螕舻脑厥侵改切﹩螕艨僧a(chǎn)生默認(rèn)操作的元素（如鏈接），或者那些已經(jīng)被制定了onclick 事件處理程序的元素。
mousemove 事件也會觸發(fā)mouseover 和 mouseout 事件。
兩個(gè)手指放在屏幕上且頁面隨手指移動而滾動時(shí)會觸發(fā)mousewheel 和 scroll 事件。

4.鍵盤與文本事件

有3個(gè)鍵盤事件：

keydown：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件。
keypress：當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)，而且如果按住不放的話，會重復(fù)觸發(fā)此事件。
keyup：當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)。

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

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

在用戶按了一下鍵盤上的字符鍵時(shí)，首先會觸發(fā)keydown 事件，然后緊跟著是 keypress 事件，最后會觸發(fā)keyup 事件。其中keydown和keypress 都是在文本框發(fā)生變化之前被觸發(fā)的；而keyup事件則是在文本框已經(jīng)發(fā)生變化之后被觸發(fā)的。

如果用戶按下的是一個(gè)非字符鍵，那么首先會觸發(fā)keydown 事件，然后就是keyup 事件。

鍵盤事件與鼠標(biāo)事件一樣，都支持相同的修改鍵。而且鍵盤事件的事件對象中也有 shiftKey、ctrlKey、altKey 和 metaKey 屬性。

4.1 鍵碼

在發(fā)生keydown 和 keyup 事件時(shí)， event對象的 keyCode 屬性中會包含一個(gè)代碼，與鍵盤上一個(gè)特定的鍵對應(yīng)。對數(shù)字字母字符鍵，keyCode 屬性的值與 ASCII 碼中對應(yīng)小寫字母或數(shù)字的編碼相同。因此數(shù)字鍵7的keyCode 值是 55，而字母 A鍵的keyCode 值為 65 ----與Shift鍵的狀態(tài)無關(guān)。

4.2 字符編碼

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

event 對象還支持一個(gè) charCode 屬性，這個(gè)屬性只有在發(fā)生keypress 事件時(shí)才包含值，而且這個(gè)值是按下的那個(gè)鍵所代表字符的ASCII碼。此時(shí)的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;}} };

?獲取案件的ASCII碼之后，通過String.fromCharCode() 方法就可以轉(zhuǎn)換成實(shí)際的字符。

var textbox = document.getElementById("myText");EventUtil.addHandler(textbox, "keypress", function(event){event = EventUtil.getEvent(event);alert(String.fromCharCode(EventUtil.getCharCode(event)));});

4.3 DOM3級變化

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

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

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

var textbox = document.getElementById("myText");EventUtil.addHandler(textbox, "keypress", function(event){event = EventUtil.getEvent(event);var identifier = event.key || event.keyIdentifier;if(identifier){alert(identifier);}});

?由于存在跨瀏覽器的問題，因此不推薦使用key、keyIdentifier 或者 char。

DOM3級事件還添加了一個(gè)名為location的屬性，這是一個(gè)數(shù)值，表示按下了什么位置上的鍵：0表示默認(rèn)鍵盤，1表示左側(cè)位置（例如左側(cè)的Alt鍵），2表示右側(cè)位置（例如右側(cè)的Shift鍵），3表示數(shù)字小鍵盤，4表示移動設(shè)備鍵盤（也就是虛擬鍵盤），5表示手柄（如任天堂wii控制器）。IE9支持這個(gè)屬性。Safari 和Chrome 支持名為keyLocation的等價(jià)屬性，但有Bug----值始終是0，除非按下了數(shù)字鍵盤返回3，否子不會是1\2\4\5

同key屬性一樣，支持location 的瀏覽器也不多，所以在跨瀏覽器開發(fā)中不推薦使用。

4.4. textInput 事件

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

由于textInput 事件主要考慮的是字符，因此它的event對象中還包括一個(gè)data屬性，這個(gè)屬性的值就是用戶輸入的字符（而非字符編碼）。例如：

var textbox = document.getElementById("myText");EventUtil.addHandler(textbox, "textInput", function(event){event = EventUtil.getEvent(event);alert(event.data);});

?5.變動事件

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

DOMSubtreeModified：在DOM結(jié)構(gòu)中發(fā)生任何變化時(shí)觸發(fā)。這個(gè)事件在其他任何事件觸發(fā)后都會觸發(fā)。
DOMNodeInserted：在一個(gè)節(jié)點(diǎn)作為子節(jié)點(diǎn)被插入另一個(gè)節(jié)點(diǎn)中時(shí)觸發(fā)。
DOMNodeRemoved：在節(jié)點(diǎn)從其父節(jié)點(diǎn)中被移除時(shí)觸發(fā)。
DOMNodeInseredIntoDocument：在一個(gè)節(jié)點(diǎn)被直接插入文檔或通過子樹間接插入文檔之后觸發(fā)。這個(gè)事件在DOMNodeInserted之后觸發(fā)。
DOMNodeRemovedFromDocument：在一個(gè)節(jié)點(diǎn)被直接從文檔中移除或通過子樹間接從文檔中移除之前觸發(fā)。這個(gè)事件在DOMNodeRemoved 之后觸發(fā)。
DOMAttrModified：在特性被修改之后觸發(fā)。
DOMCharacterDataModified：在文本節(jié)點(diǎn)的值發(fā)生變化時(shí)觸發(fā)。

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

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

IE8 及更早版本不支持任何變動事件。

6.HTML5事件

HTML5 詳盡列出了瀏覽器應(yīng)該支持的所有事件。其中部分已經(jīng)得到完善支持。

6.1. contextmenu 事件

為了實(shí)現(xiàn)上下文菜單，開發(fā)人員面臨的一個(gè)主要問題是如何確定應(yīng)該顯示上下文菜單（在windows中是右鍵單擊，在Mac中是Ctrl + 單擊），以及如何屏蔽與該操作關(guān)聯(lián)的默認(rèn)上下文菜單。為了解決這個(gè)問題，，就出現(xiàn)了contextmenu 這個(gè)事件，用于表示合適應(yīng)該顯示上下文菜單，以便開發(fā)人員取消默認(rèn)的上下文菜單而提供自定義的菜單。

由于contextmenu 事件是冒泡的，因此可以為document 指定一個(gè)事件處理程序，用于處理頁面中發(fā)生的所有此類事件。這個(gè)事件的目標(biāo)是發(fā)生用戶操作的元素。在所有瀏覽器中都可以取消這個(gè)事件：在兼容DOM 的瀏覽器中，使用? event.preventDefault()；在IE 中，將event.returnValue 設(shè)為false。

因?yàn)閏ontextmenu 事件屬于鼠標(biāo)事件，所以其事件對象中包含與光標(biāo)位置有關(guān)的所有屬性。通常使用contextmenu 事件來顯示自定義的上下文菜單，是使用onclick 事件處理程序來隱藏該菜單。co

<!DOCTYPE html> <html> <head><title>Right Click </title> </head> <body> <div id="myDiv">right click</div><ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver"><li><a href="http://www.baidu.com">baidu</a></li><li><a href="http://www.yahoo.com.cn">yahoo</a></li><li><a href="http://www.163.com">163</a></li> </ul> <script type="text/javascript" src="eventutil.js"></script> <script type="text/javascript">EventUtil.addHandler(window, "load", function(event){var div = document.getElementById("myDiv");EventUtil.addHandler(div, "contextmenu", function(event){event = EventUtil.getEvent(event);EventUtil.preventDefault(event);var menu = document.getElementById("myMenu");menu.style.left = event.clientX +"px";menu.style.top = event.clientY + "px";menu.style.visibility = "visible";});EventUtil.addHandler(document, "click", function(event){document.getElementById("myMenu").style.visibility = "hidden";});}); </script> </body> </html>

?支持contextmenu 事件的瀏覽器有IE、Firefox、Safari、Chrome 和 Opera 11+.

6.2beforeunload 事件

之所以有發(fā)生在window對象上的beforeunload 事件，是為了讓開發(fā)人員有可能在頁面卸載前阻止這一操作。這個(gè)事件會在瀏覽器卸載頁面之前觸發(fā)，可以通過它來取消卸載并繼續(xù)使用原有頁面。但是不恩能夠徹底取消這個(gè)事件，因?yàn)槟蔷拖喈?dāng)于讓用戶無法離開當(dāng)前頁面了。

對于IE 及 Firefox 而言，通過將event.returnValue 設(shè)置為要顯示給用戶的字符串可以返回確認(rèn)關(guān)閉對話框；對于Safari 和 Chrome 而言，需要將處理函數(shù)返回該字符串

EventUtil.addHandler(window, "beforeunload", function(event){event = EventUtil.getEvent(event);var message = "I'm really going to miss you if you go.";event.returnValue = message; //for IE & Firefoxreturn message; //for Safari & Chrome});

Chrome 彈出對話框如下：

6.3. DOMContentLoaded 事件

?window 的load 事件會在頁面中的一切都加載完畢時(shí)觸發(fā)，但這個(gè)過程可能會因?yàn)橐虞d的外部資源過多而頗費(fèi)周折。而DOMContextLoaded 事件在形成完整的 DOM樹之后就會觸發(fā)，不理會圖像、JavaScript 文件、CSS 文件或其他資源是否已經(jīng)下載完畢。與load 事件不同，DOMContentLoaded 支持在頁面下載的早期添加事件處理程序，這也意味著用戶可以盡早地與頁面進(jìn)行交互。

處理DOMContentLoaded 事件，可以為document 或 window 添加相應(yīng)是事件處理程序，其event不會提供額外的信息，target屬性是document。這個(gè)事件始終都會在load 事件之前觸發(fā)。

EventUtil.addHandler(document, "DOMContentLoaded", function(event){alert("Content loaded");});

IE9+、FireFox、Chrome、Safari 3.1+ 和 Opera 9+ 都支持DOMContentLoaded 事件。

6.4. readystatechange 事件

readystatechange 事件的目的是提供與文檔或元素加載狀態(tài)有關(guān)的信息，支持此事件的每個(gè)對象都有一個(gè) readyState 屬性，可能包含下列5個(gè)值中的一個(gè)：

uninitialized（未初始化）：對象存在但尚未初始化。
loading（正在加載）：對象正在加載數(shù)據(jù)。
loaded（加載完畢）：對象加載數(shù)據(jù)完成。
interactive（交互）：可以交互對象了，但還沒有完全加載。
complete（完成）：對象已經(jīng)加載完畢。

6.5. pageshow 和 pagehide 事件

Firefox 和 Opera 有一個(gè)特性，名叫“往返緩存”（back-forward cache 或 bfcache），可以在用戶使用瀏覽器的“后退”和“前進(jìn)”按鈕是加快頁面的轉(zhuǎn)換速度。這個(gè)緩存中不僅保存者頁面數(shù)據(jù)，還保存了DOM 和 JavaScript 的狀態(tài)；實(shí)際上是將整個(gè)頁面都保存在了內(nèi)存里。如果頁面位于bfcache里，那么再次打開該頁面就不會觸發(fā)load事件。為了更形象地說明bfcache 的行為， Firefox 還是提供了一些新事件。

第一個(gè)事件就是pageshow，這個(gè)事件在頁面顯示時(shí)觸發(fā)，無論該頁面是否來自bfcache。在重新加載的頁面中，pageshow 會在load 事件觸發(fā)后觸發(fā)；而對于bfcache 中的頁面，pageshow 會在頁面狀態(tài)完全回復(fù)的那一刻觸發(fā)。雖然這個(gè)事件的目標(biāo)是document，但必須將其事件處理程序添加到window。

第二個(gè)事件是pagehide 事件，該事件會在瀏覽器卸載頁面的時(shí)候觸發(fā)。

支持pageshow 和 pagehide 事件的瀏覽器有 FIrefox、Safari 5+、Chrome 和 Opera。

6.6. hashchange 事件

HTML5 增加了 hashchange事件，以便在URL的參數(shù)列表（及URL中“#”后面的所有字符串）發(fā)生變化時(shí)通知開發(fā)人員。之所以新增這個(gè)事件，是因?yàn)樵贏jax應(yīng)用中，開發(fā)人員經(jīng)常要利用URL參數(shù)列表來保存狀態(tài)或?qū)Ш叫畔ⅰ?/p>

內(nèi)存還性能

?由于事件處理程序可以為現(xiàn)代Web應(yīng)用提供交互能力，因此很多開發(fā)人員會部分青紅皂白地向頁面中添加大量的處理程序。在JavaScript 中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運(yùn)行性能。導(dǎo)致這一問題的原因是多方面的。首先每個(gè)函數(shù)都是對象，都會占用內(nèi)存；內(nèi)存中對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導(dǎo)致的DOM 訪問次數(shù)，會延遲整個(gè)頁面的交互就緒事件。事實(shí)上，從如何利用好事件處理程序的角度出發(fā)，還是有一些方法能夠提升性能的。

1.事件委托

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

<!DOCTYPE html> <html> <head><title>title</title> </head> <body> <ul><li id="goBaidu">baidu</li><li id="changeTitle">title</li><li id="sayHi">sayHi</li></ul> <script type="text/javascript" src="eventutil.js"></script> <script type="text/javascript">var goBaidu = document.getElementById("goBaidu");var changeTitle = document.getElementById("changeTitle");var sayHi = document.getElementById("sayHi");EventUtil.addHandler(goBaidu, "click", function(event){location.href = "http://www.baidu.com";});EventUtil.addHandler(changeTitle, "click", function(event){document.title = "I changed the title";});EventUtil.addHandler(sayHi, "click", function(event){alert("hi");}); </script> </body> </html>

如果在一個(gè)負(fù)載的Web 應(yīng)用程序中，對所有可點(diǎn)擊的元素都采用這種方式，呢么結(jié)果就會有數(shù)不清的代碼用戶添加事件處理程序。此時(shí)，可以利用事件委托技術(shù)解決這個(gè)問題。使用事件委托，只需要在DOM樹中盡量最高的層次上添加一個(gè)事件處理程序。

var list = document.getElementById("myLink");EventUtil.addHandler(list, "click", function(event){event = EventUtil.getEvent(event);var target = EventUtil.getTarget(event);switch(target.id){case "goBaidu":location.href = "http://www.baidu.com";break;case "changeTitle":document.title = "I changed the title";break;case "sayHi":alert("hi");break;} });

如果可行的話，也可以考慮為document對象添加一個(gè)事件處理程序，用以處理頁面上發(fā)生的某種特定類型的事件。這樣做與采取傳統(tǒng)的做法相比具有以下優(yōu)點(diǎn)：

document 對象很快就可以訪問，而且可以在頁面生命周期的任何時(shí)點(diǎn)上為他添加事件處理程序（無需等待DOMContentLoaded 或 load 事件）。換句話說，只要可點(diǎn)擊的元素呈現(xiàn)在頁面上，就可以立即具備適當(dāng)?shù)墓δ堋?/li>
在頁面中設(shè)置事件處理程序所需要的事件更少，至添加一個(gè)事件處理程序所需的DOM引用更少，所花的時(shí)間也更少。
整個(gè)頁面占用的內(nèi)存空間更少，能夠提升整體性能。

最適合采用事件委托技術(shù)的事件包括 click、mousedown、mouseup、keydown、keyup 和 keypress。雖然mouseover 和mouseout 事件也冒泡，但要適當(dāng)處理他們并不容易，而且經(jīng)常需要計(jì)算元素的位置。

2.移除事件處理程序

每當(dāng)事件處理程序制定給元素時(shí)，運(yùn)行中的瀏覽器代碼與支持頁面交互的JavaScript 代碼之間就會建立一個(gè)連接。這種連接越多，頁面執(zhí)行起來就越慢。如前所述可以采用事件委托技術(shù)，限制建立的連接數(shù)量。另外在不需要的時(shí)候移除事件處理程序，也是解決這個(gè)問題的一種方案。內(nèi)存中留有那些過時(shí)不用的“空事件處理程序”（dangling event handler），也是造成Web應(yīng)用程序內(nèi)存與性能問題的主要原因。

一般來說，最好的做法是在頁面卸載之前，先通過onunload 事件處理程序移除所有事件處理程序。在此，事件委托技術(shù)再次表現(xiàn)出它的優(yōu)勢，需要跟蹤的事件處理程序越少，移除他們就越容易。對這種類似撤銷的操作，我們可以把它想象成：只要通過onload 事件處理程序添加的東西，最后都要通過onunload 事件處理程序?qū)⑺瞥?/p>

模擬事件

?事件，就是網(wǎng)頁中某個(gè)特別值得關(guān)注的瞬間。事件經(jīng)常有用戶操作或通過其他瀏覽器功能來觸發(fā)。其實(shí)，也可以使用JavaScript 在任意時(shí)刻觸發(fā)特定的事件，而此時(shí)的事件就如同瀏覽器創(chuàng)建的事件一樣。也就是說這些事件該冒泡還會冒泡，而且照樣能夠?qū)е聻g覽器執(zhí)行已經(jīng)制定的處理他們的事件處理程序。

1.DOM中的事件模擬

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

UIEvents：一般化的UI事件。鼠標(biāo)事件和鍵盤事件都繼承自UI 事件。DOM3 級中是UIEvent。
MouseEvents：一般化的鼠標(biāo)事件。DOM3級中是MouseEvent。
MutationEvents：一般化的DOM變動事件。DOM3級中是MutationEvent。
HTMLEvents：一般化的HTML 事件。對應(yīng)的DOM3級事件。

在創(chuàng)建了event 對象之后，還需要使用與事件有關(guān)的信息對其進(jìn)行初始化，每種類型的event對象都有一個(gè)特殊的方法，為他傳入適當(dāng)?shù)臄?shù)據(jù)u，就可以初始化該event 對象。不同類型的這個(gè)方法的名字也不相同，具體要取決與 createEvent() 中使用的參數(shù)。

模擬事件的最后一部就是觸發(fā)事件。這一步需要使用dispatchEvent() 方法，所有支持事件的ＤＯＭ節(jié)點(diǎn)都支持這個(gè)方法。調(diào)用dispatchEvent() 方法時(shí)，需要傳入一個(gè)參數(shù)，即表示要觸發(fā)事件的event對象。觸發(fā)事件后，改時(shí)間就躋身“官方事件”之列了，因而能夠照樣冒泡并引發(fā)相應(yīng)事件處理程序的執(zhí)行。

1.1.模擬鼠標(biāo)事件

創(chuàng)建新的鼠標(biāo)事件對象并為其指定必要的信息，就可以模擬鼠標(biāo)事件。創(chuàng)建鼠標(biāo)事件對象的方法是為createEvent() 傳入字符串MouseEvents。返回的對象有一個(gè)名為 initMouseEvent() 方法，用于制定與該鼠標(biāo)事件有關(guān)的信息，這個(gè)方法接收15個(gè)參數(shù)，分別與鼠標(biāo)事件中每個(gè)典型的屬性一一對應(yīng)：

type（字符串）：表示要觸發(fā)的事件類型，例如click。
bubbles（布爾值）：表示事件是否應(yīng)該冒泡。為精確地模擬鼠標(biāo)事件，應(yīng)該把這個(gè)參數(shù)設(shè)置為true。
cancelable（布爾值）：表示事件是否可以取消，為精確地模擬鼠標(biāo)事件，應(yīng)該吧這個(gè)參數(shù)值為true。
view（AbstractView）：與事件關(guān)聯(lián)的師徒。這個(gè)參數(shù)幾乎總是要設(shè)置為 document.defaultView。
detail（整數(shù)）：與事件有關(guān)的詳細(xì)信息。這個(gè)值一般只有事件處理程序使用，但通常都設(shè)置為0。
screenX（整數(shù)）：事件相對于屏幕的X坐標(biāo)。
screenY（整數(shù)）：事件相對于屏幕的Y坐標(biāo)。
clientX（整數(shù)）：事件相對于視口的X坐標(biāo)。
clientY（整數(shù)）：事件相對于視口的Y坐標(biāo)。
ctrlKey（布爾值）：表示是否按下了Ctrl鍵。默認(rèn)為false。
altKey（布爾值）：表示是否按下了Alt 鍵。默認(rèn)為false。
shiftKey（布爾值）：表示是否按下了Shift鍵。默認(rèn)為false。
metaKey（布爾值）：表示是否按下了Meta鍵。默認(rèn)值為false。
button（整數(shù)）：表示按下了哪個(gè)鼠標(biāo)鍵。默認(rèn)為0.
relatedTarget（對象）：表示與事件相關(guān)的對象。這個(gè)參數(shù)只在模擬mouseover 或 mouseout 時(shí)使用。

其中前四個(gè)參數(shù)對正確觸發(fā)事件至關(guān)重要，因?yàn)闉g覽器要用到這些參數(shù)。

var sayHi = document.getElementById("sayHi");var event = document.createEvent("MouseEvents");event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);sayHi.dispatchEvent(event);

小結(jié)

?事件是將JavaScript 與網(wǎng)頁聯(lián)系在一起的主要方式。DOM3級事件規(guī)范和HTML5 定義了常見的大多數(shù)事件。即使有規(guī)范定義了基本事件，但很多瀏覽器仍然在規(guī)范之外實(shí)現(xiàn)了自己的轉(zhuǎn)悠事件，從而為開發(fā)人員提供更多掌握用戶交互的手段。

在使用事件時(shí)，需要考慮如下一些內(nèi)存與性能方面的問題。

有必要限制一個(gè)頁面中事件處理程序的數(shù)量，數(shù)量太多會導(dǎo)致占用大量內(nèi)存，而且也會讓用戶感覺頁面反應(yīng)不夠靈敏。
建立在事件冒泡機(jī)智上的事件委托技術(shù)，可以有效地減少事件處理程序的數(shù)量。
建議在瀏覽器瀉早頁面之前移除頁面中的所有事件處理程序。

事件是JavaScript 中最重要的主題之一，深入理解事件的工作機(jī)制以及他們對性能的影響至關(guān)重要。

轉(zhuǎn)載于:https://www.cnblogs.com/liangflying521/p/5169047.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript学习九、事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： PyMySQL 的decode坑
下一篇： [20160307]绑定变量的分配长度3