當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript学习九、事件

發布時間：2025/5/22 javascript 44 豆豆

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

JavaScript 與 HTML 之間的交互是通過事件實現的。事件，就是文檔或者瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序）來預定事件，以便事件發生時執行相應的代碼。類似于設計模式中的觀察員模式。支持頁面的行為與頁面的外觀之間的松散耦合。

事件流

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

IE和 Netscape 開發團隊居然提出了差不多是完全相反的事件流的概念。IE 的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕獲流。

1.事件冒泡

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

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

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

<div>

<body>

<html>

document

也就是說，click事件首先在<div> 元素上發生，而這個元素就是我們單機的元素。然后，click事件沿著DOM樹向上傳播，在每一級節點上都會發生，知道傳播到 document 對象。

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

2.事件捕獲

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

document

<html>

<body>

<div>

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

雖然事件捕獲是 Netscape Communicator 唯一支持的事件流模型，但IE9、Safari、Chrome、Opera 和 Firefox 目前也支持這種事件流模型。進管DOM2 及事件規范要求事件應該從document 對象開始傳播，但這些瀏覽器都是從 window 對象開始捕獲事件的。

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

?3.DOM事件流

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

事件處理程序

?事件就是用戶或瀏覽器自身執行的某種動作。諸如 click、load、mouseover，都是事件的名字，而相應某個事件的函數就叫做事件處理程序（或事件偵聽器）。事件處理程序的名字以on 開頭，因此 click 事件的事件處理程序就是 onclick，以此類推。

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

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

也可以調用其他地方定義的腳本：

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

在HTML 中指定事件處理程序存在一個時差問題：因為用戶可能會在HTML 元素一出現在頁面上就觸發相應的事件，但當時的事件可能尚不具備執行條件。如上例中，假設代碼還沒有加載進來用戶就點擊了div，就會引發錯誤。為此，很多HTML 事件處理程序都會被封裝在一個try-catch 塊中，以便錯誤不會浮出水面。

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

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

2.DOM0 級事件處理程序

每個元素（包括window 和 document）都有自己的事件處理程序屬性，這些屬性通常全部小寫，例如：onclick。將這種屬性設置為一個函數，就可以指定事件處理程序。

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

使用DOM0 級方法制定的事件處理程序被認為是元素的方法。因此這時候的事件處理程序是在元素的作用域中運行，所以承諾須中的this 引用當前元素。

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

可以通過將事件處理程序屬性的值設置為null 來刪除通過DOM0 級方法制定的事件處理程序。

div.onclick = null;

3.DOM2 級事件處理程序

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

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

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

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

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

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

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

?4.IE 事件處理程序

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

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

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

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

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

只要恰當的使用能力檢測，就可以編寫自己的跨瀏覽器的方式處理事件。只需要關注冒泡階段。

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

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

事件對象

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

1.DOM中的事件對象

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

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

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

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

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

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

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

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

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

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

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

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

2.IE中的事件對象

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

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

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

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

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

IE 的 event 對象同樣也包含與創建它的事件相關的屬性和方法。

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

?因為事件處理程序的作用域是根據制定它的方式來確定的，所以不能認為this 會始終你等于事件目標，故而，最好還是使用 event.srcElement 比較保險。

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.跨瀏覽器的事件對象

?繼續補充EventUtil對象，增加對event 對象的支持。

?使用時需要在頁面中加入引入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瀏覽器中可能發生的事件有很多類型。不同的事件類型具有不同的信息，而DOM3級事件規定了一下幾類事件。

UI（User Interface，用戶界面）事件，當用戶與頁面上的元素交互時觸發。
焦點事件，當元素獲得或失去焦點時觸發。
鼠標事件，當用戶通過鼠標在頁面上執行操作時觸發。
滾輪事件，當使用鼠標滾輪（或類似設備）時觸發。
文本事件，當在文檔中輸入文本時觸發。
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發。
合成事件，當為IME（Input Method Editor，輸入法編輯器）輸入字符時觸發。
變動（mutation）事件，當底層DOM結構發生變化是觸發。
變動名稱事件，當元素或屬性名變動時觸發。此類事件已被廢棄，沒有任何瀏覽器實現它們。

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

1.UI事件

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

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

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

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

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

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

1.1 load事件

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

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

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

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

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

一般來說在window 上面發生的任何事件都可以在<body> 元素中通過相應的特性來指定，因為在HTML中無法訪問window 元素。但是建議盡可能的使用JavaScript 方式。

在創建新的<img>元素時，可以為其制定一個事件處理程序，以便圖像加載完畢后給出提示。此時最重要的是要在指定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";});

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

?同樣的功能也可以通過使用DOM0 級的Image對象實現。在DOM出現之前，開發人員經常使用Image 對象在客戶端預先加載圖像。可以像使用<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對象實現為<img>元素，但并非所有瀏覽器都如此，所以最好將他們區別對待。

1.2 unload 事件

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

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

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

具體來說，當發生以下情況時，會發出 unload 事件：

點擊某個離開頁面的鏈接
在地址欄中鍵入了新的 URL
使用前進或后退按鈕
關閉瀏覽器
重新加載頁面

但是實際上，這行代碼并沒有執行，查了很多資料發現，因為onunload函數是在body已經關閉后才調動的，所以如果使用alert的話(alert父窗口是body)就會報錯或不顯示！

第二種方法仍然是在<body>元素添加一個特性（與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事件

當瀏覽器窗口被調整到一個新的高度或寬度時，就會觸發resize 事件。這個事件是在window 窗口上觸發。

關于何時會觸發resize 事件，不同瀏覽器有不同的機制，IE、Safari、Chrome和Opera 會在瀏覽器窗口變化了1像素時就觸發resize事件，然后隨著變化不斷重復觸發。Firefox則最實惠在用戶停止調整窗口大小是才會觸發resize事件。所以應該注意不要在這個事件中添加大計算量的代碼，因為這些代碼有可能被頻繁執行，從而導致瀏覽器反應明顯變慢。

?2.焦點事件

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

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

3.鼠標與滾輪事件

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

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

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

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>

?雙擊后輸出樣式如下：

鼠標事件中還有一類滾輪事件，其實就是一個mousewheel 事件。稍后介紹。

3.1. 客戶區坐標位置

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

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. 頁面坐標位置

頁面坐標位置表示的坐標是從頁面本身而非視口左邊和頂邊計算的，用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. 屏幕坐標位置

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

3.4.修改鍵

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

?3.5. 相關元素

在發生mouseover 和 mouseout 事件時，還會涉及更多的元素。這兩個事件都會涉及把鼠標指針從一個元素的邊界之內移動到另一個元素的邊界之內。

對mouseover事件而言，事件的主要目標是獲得光標的元素，而相關元素就是哪個失去光標的元素。類似的，對mouseout事件而言，事件的主目標是失去光標的元素，而相關的元素則是獲得光標的元素。

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

添加到EventUtil 對象中，以實現跨瀏覽器取得相關元素：

使用方法如下：

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. 鼠標按鈕

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

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

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

0：表示沒有按下按鈕；
1：表示按下了主鼠標按鈕；
2：表示按下了次鼠標按鈕；
3：表示同時按下了主次鼠標按鈕；
4：表示按下了中間的鼠標按鈕；
5：表示同時按下了主鼠標按鈕和中間的鼠標按鈕；
6：表示同時按下了次鼠標按鈕和中間的鼠標按鈕；
7：表示同事按下了三個鼠標按鈕。

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

?3.7 觸摸設備

iOS 和 Android 設備的實現非常特別，因為這些設備沒有鼠標。在面向iPhone和 iPad 中的Safari 開發是，要記住：

不支持dblclick 事件。雙擊瀏覽器窗口會放大畫面，而且沒有辦法改變該行為；
輕擊可單擊元素會觸發 mousemove 事件。如果此操作會導致內容變化，將不在有其他事件發生；如果屏幕沒有因此變化，那么會一次發生mousedown、mouseup 和 click 事件。輕擊不可單擊的元素不會觸發任何事件。可單擊的元素是指那些單擊可產生默認操作的元素（如鏈接），或者那些已經被制定了onclick 事件處理程序的元素。
mousemove 事件也會觸發mouseover 和 mouseout 事件。
兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發mousewheel 和 scroll 事件。

4.鍵盤與文本事件

有3個鍵盤事件：

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

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

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

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

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

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

4.1 鍵碼

在發生keydown 和 keyup 事件時， event對象的 keyCode 屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對數字字母字符鍵，keyCode 屬性的值與 ASCII 碼中對應小寫字母或數字的編碼相同。因此數字鍵7的keyCode 值是 55，而字母 A鍵的keyCode 值為 65 ----與Shift鍵的狀態無關。

4.2 字符編碼

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

event 對象還支持一個 charCode 屬性，這個屬性只有在發生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;}} };

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

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

4.3 DOM3級變化

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

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

IE9支持key 屬性，但不支持char 屬性。Safari5 和 Chrome 支持名為 keyIdentifier的屬性，在按下非字符鍵（如shift）的情況下與key的值相同。對于字符鍵，keyIdentifier 返回一個格式類似“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級事件還添加了一個名為location的屬性，這是一個數值，表示按下了什么位置上的鍵：0表示默認鍵盤，1表示左側位置（例如左側的Alt鍵），2表示右側位置（例如右側的Shift鍵），3表示數字小鍵盤，4表示移動設備鍵盤（也就是虛擬鍵盤），5表示手柄（如任天堂wii控制器）。IE9支持這個屬性。Safari 和Chrome 支持名為keyLocation的等價屬性，但有Bug----值始終是0，除非按下了數字鍵盤返回3，否子不會是1\2\4\5

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

4.4. textInput 事件

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

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

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

?5.變動事件

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

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

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

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

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

6.HTML5事件

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

6.1. contextmenu 事件

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

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

因為contextmenu 事件屬于鼠標事件，所以其事件對象中包含與光標位置有關的所有屬性。通常使用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 事件

之所以有發生在window對象上的beforeunload 事件，是為了讓開發人員有可能在頁面卸載前阻止這一操作。這個事件會在瀏覽器卸載頁面之前觸發，可以通過它來取消卸載并繼續使用原有頁面。但是不恩能夠徹底取消這個事件，因為那就相當于讓用戶無法離開當前頁面了。

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

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 事件會在頁面中的一切都加載完畢時觸發，但這個過程可能會因為要加載的外部資源過多而頗費周折。而DOMContextLoaded 事件在形成完整的 DOM樹之后就會觸發，不理會圖像、JavaScript 文件、CSS 文件或其他資源是否已經下載完畢。與load 事件不同，DOMContentLoaded 支持在頁面下載的早期添加事件處理程序，這也意味著用戶可以盡早地與頁面進行交互。

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

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

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

6.4. readystatechange 事件

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

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

6.5. pageshow 和 pagehide 事件

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

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

第二個事件是pagehide 事件，該事件會在瀏覽器卸載頁面的時候觸發。

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

6.6. hashchange 事件

HTML5 增加了 hashchange事件，以便在URL的參數列表（及URL中“#”后面的所有字符串）發生變化時通知開發人員。之所以新增這個事件，是因為在Ajax應用中，開發人員經常要利用URL參數列表來保存狀態或導航信息。

內存還性能

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

1.事件委托

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

<!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>

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

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對象添加一個事件處理程序，用以處理頁面上發生的某種特定類型的事件。這樣做與采取傳統的做法相比具有以下優點：

document 對象很快就可以訪問，而且可以在頁面生命周期的任何時點上為他添加事件處理程序（無需等待DOMContentLoaded 或 load 事件）。換句話說，只要可點擊的元素呈現在頁面上，就可以立即具備適當的功能。
在頁面中設置事件處理程序所需要的事件更少，至添加一個事件處理程序所需的DOM引用更少，所花的時間也更少。
整個頁面占用的內存空間更少，能夠提升整體性能。

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

2.移除事件處理程序

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

一般來說，最好的做法是在頁面卸載之前，先通過onunload 事件處理程序移除所有事件處理程序。在此，事件委托技術再次表現出它的優勢，需要跟蹤的事件處理程序越少，移除他們就越容易。對這種類似撤銷的操作，我們可以把它想象成：只要通過onload 事件處理程序添加的東西，最后都要通過onunload 事件處理程序將它移除。

模擬事件

?事件，就是網頁中某個特別值得關注的瞬間。事件經常有用戶操作或通過其他瀏覽器功能來觸發。其實，也可以使用JavaScript 在任意時刻觸發特定的事件，而此時的事件就如同瀏覽器創建的事件一樣。也就是說這些事件該冒泡還會冒泡，而且照樣能夠導致瀏覽器執行已經制定的處理他們的事件處理程序。

1.DOM中的事件模擬

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

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

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

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

1.1.模擬鼠標事件

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

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

其中前四個參數對正確觸發事件至關重要，因為瀏覽器要用到這些參數。

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);

小結

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

在使用事件時，需要考慮如下一些內存與性能方面的問題。

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

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

轉載于:https://www.cnblogs.com/liangflying521/p/5169047.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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