事件發(fā)生以后，會產(chǎn)生一個事件對象（Event），代表事件的狀態(tài)。下面本篇文章就來帶大家深入了解一下JS中的事件對象Event，對它做一個詳細的解讀，希望對大家有所幫助！

一、什么是事件對象 Event

??每一個事件觸發(fā)時，都會產(chǎn)生一個與之對應的事件對象 event ，其中包含了觸發(fā)事件的元素、鍵盤鼠標的狀態(tài)、位置等等內(nèi)容。

??每當用戶觸發(fā)一個事件后，JS 就會自動生成一個 event 對象，根據(jù)觸發(fā)事件的不同，這個對象包含的內(nèi)容也不同，比如通過鼠標觸發(fā)點擊事件，會產(chǎn)生一個 MouseEvent 對象，其中包含了鼠標的位置等內(nèi)容；通過鍵盤觸發(fā)事件，會產(chǎn)生一個 KeyboardEvent 對象其中包含按鍵相關的信息。

• event 對象代表事件的狀態(tài)，比如觸發(fā)事件的元素、鍵盤按鍵的狀態(tài)、鼠標的位置、鼠標按鍵的狀態(tài)等等；
• event 對象是一個隱式參數(shù)，并且只在事件發(fā)生的過程中才有效；
• event 對象根據(jù)觸發(fā)方式的不同會具有不同的屬性，也就是說某些屬性只對特定事件有效，但所有內(nèi)容都是繼承自 Event 對象；

• event 對象在 IE 與 Chrome 等瀏覽器表現(xiàn)不盡相同，例如說 event.target 表示觸發(fā)事件的元素，在 IE 中需要使用 event.srcElement 獲??；

Event對象本身就是一個構(gòu)造函數(shù)，可以用來生成新的實例。

event = new Event(type, options);

Event構(gòu)造函數(shù)接受兩個參數(shù)。第一個參數(shù)type是字符串，表示事件的名稱；第二個參數(shù)options是一個對象，表示事件對象的配置。該對象主要有下面兩個屬性。

• bubbles：布爾值，可選，默認為false，表示事件對象是否冒泡。

• cancelable：布爾值，可選，默認為false，表示事件是否可以被取消，即能否用Event.preventDefault()取消這個事件。一旦事件被取消，就好像從來沒有發(fā)生過，不會觸發(fā)瀏覽器對該事件的默認行為。

var ev = new Event(   'look',   {     'bubbles': true,     'cancelable': false   } ); document.dispatchEvent(ev);

上面代碼新建一個look事件實例，然后使用dispatchEvent方法觸發(fā)該事件。

注意，如果不是顯式指定bubbles屬性為true，生成的事件就只能在“捕獲階段”觸發(fā)監(jiān)聽函數(shù)。

// HTML 代碼為 // <div><p>Hello</p></div> var div = document.querySelector('div'); var p = document.querySelector('p');  function callback(event) {   var tag = event.currentTarget.tagName;   console.log('Tag: ' + tag); // 沒有任何輸出 }  div.addEventListener('click', callback, false);  var click = new Event('click'); p.dispatchEvent(click);

上面代碼中，p元素發(fā)出一個click事件，該事件默認不會冒泡。div.addEventListener方法指定在冒泡階段監(jiān)聽，因此監(jiān)聽函數(shù)不會觸發(fā)。如果寫成div.addEventListener('click', callback, true)，那么在“捕獲階段”可以監(jiān)聽到這個事件。

另一方面，如果這個事件在div元素上觸發(fā)。

div.dispatchEvent(click);

那么，不管div元素是在冒泡階段監(jiān)聽，還是在捕獲階段監(jiān)聽，都會觸發(fā)監(jiān)聽函數(shù)。因為這時div元素是事件的目標，不存在是否冒泡的問題，div元素總是會接收到事件，因此導致監(jiān)聽函數(shù)生效。

二、Event 屬性

??我們在前面提到，根據(jù)觸發(fā)方式的不同 event 對象會具有不同的屬性，我們可以將其大體分為四部分：

通用屬性 (無論是通過鍵盤還是鼠標觸發(fā)都擁有的屬性)

• bubbles 事件是否會冒泡，布爾值；

• cancelable 事件是否具有默認行為，布爾值；
  ??默認行為指的是瀏覽器中規(guī)定的一些行為，比如 <a> 標簽點擊后會跳轉(zhuǎn)鏈接，<form> 標簽內(nèi)按回車會自動提交等等。

• currentTarget 事件處理程序當前正在處理事件的那個元素，返回一個 Element 對象；

• defaultPrevented 事件是否取消了默認行為，布爾值；

• detail 返回一個包含事件詳細信息的數(shù)字
  ??在 click 、 mousedown 和 mouseup 事件中，該數(shù)字表示當前的點擊次數(shù)， dblclick 事件中，該數(shù)字一直為 2 。在鍵盤事件和鼠標經(jīng)過事件中，該數(shù)字一直為0。

• eventPhase 返回一個代表事件處理程序發(fā)生時所在階段的數(shù)字；
  ??0表示當前階段未發(fā)生其他事件；1表示當前事件在捕獲階段發(fā)生；2表示當前事件處于目標階段；3表示當前事件處于冒泡階段；

• isTrusted 表示該事件是由用戶行為觸發(fā)的，還是由 JS 代碼觸發(fā)的，布爾值；
  ??當事件是由用戶行為（點擊等）觸發(fā)時，值為 true ，當事件是通過 EventTarget.dispatchEvent() 派發(fā)的時候，這個屬性的值為 false 。

<ul>     <li>列表1</li>     <li>列表2</li>     <li>列表3</li>     <li>列表4</li></ul><script>     document.querySelector('ul').addEventListener("click", fn1, true)      document.querySelector('ul').addEventListener("click", fn1, false)      document.querySelector("li").addEventListener("click", fn1, true)      function fn1() {         console.log(this);		// 打印當前事件對象         console.log(event.eventPhase);		// 打印     }</script>

??點擊列表1后，控制臺打印如下結(jié)果：

• target 返回觸發(fā)該事件的目標節(jié)點，返回一個 Element 對象；
  ??target 并不一定與 this 指向相同，this 指向的是當前發(fā)生事件的元素，而 target 指向的是觸發(fā)該事件的元素，可以將上方代碼中的 console.log(event.eventPhase); 換成 console.log(event.target); 來具體體驗一下兩者的不同。
  ??在 IE 瀏覽器中應使用 srcElement 來代替 target。

• type 返回觸發(fā)的事件名稱，例 click ，keydown等；

鼠標屬性

• button 當事件被觸發(fā)時，哪個鼠標按鈕被點擊；
• clientX 當事件被觸發(fā)時，鼠標指針的 x 軸坐標；
• clientY 當事件被觸發(fā)時，鼠標指針的 y 軸坐標；
• screenX 當事件被觸發(fā)時，鼠標指針的 x 軸坐標；
• screenY 當事件被觸發(fā)時，鼠標指針的 y 軸坐標；

鍵盤屬性

• altKey 當事件被觸發(fā)時，“Alt” 是否被按下；
• ctrlKey 當事件被觸發(fā)時，“Ctrl” 是否被按下；
• metaKey 當事件被觸發(fā)時，“meta” 是否被按下；
• shiftKey 當事件被觸發(fā)時，“Shift” 是否被按下；
• Location 返回按鍵在設備上的位置；
• charCode 當事件被觸發(fā)時，觸發(fā)鍵值的字母代碼；
• key 按下按鍵時返回按鍵的標識符；
• keyCode 返回 keypress 事件觸發(fā)的鍵的值的字符代碼，或者 keydown 或 keyup 事件的鍵的代碼；
• which 返回 keypress 事件觸發(fā)的鍵的值的字符代碼，或者 keydown 或 keyup 事件的鍵的代碼；
• relatedTarget 返回與事件的目標節(jié)點相關的節(jié)點。

IE屬性

• cancelBubble 如果想阻止事件冒泡，必須把該屬性設為 true；
• fromElement 對于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素；
• returnValue 等同于 defaultPrevented；
• srcElement 等同于 target；
• toElement 對于 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素；
• x 事件發(fā)生的位置的 x 坐標；
• y 事件發(fā)生的位置的 y 坐標；

三、Event 方法

• initEvent() 初始化新創(chuàng)建的 Event 對象的屬性；
• preventDefault() 阻止觸發(fā)事件元素的默認行為；
• stopPropagation() 阻止事件冒泡；

??如果想要阻止事件元素的默認行為，例如點擊 <a> 標簽時執(zhí)行點擊事件，不要跳轉(zhuǎn)鏈接，需要在事件處理程序中調(diào)用 preventDefault 方法：

<a href="http://baidu.com">百度一下，你就知道</a> <script> 	document.querySelector("a").onclick = function () { 		event.preventDefault(); 		//	do something 	} </script>

??如果想要阻止事件冒泡，例如點擊子元素標簽時執(zhí)行子元素的點擊事件，而不想要執(zhí)行父級元素的事件處理程序，則需要調(diào)用 stopPropagation 方法：

<ul> 	<li>不要觸發(fā) ul 的點擊事件處理程序</li> </ul> <script> 	document.querySelector("ul").onclick = function () { 		alert("事件冒泡，觸發(fā) ul 的點擊事件") 	}  	document.querySelector("li").onclick = function () { 		event.stopPropagation(); 		// do something 	} </script>

其他相關方法

• addEventListener() 給目標元素注冊監(jiān)聽事件；
• createEvent() 創(chuàng)建一個 Event 對象；
• dispatchEvent() 將事件發(fā)送到目標元素的監(jiān)聽器上；
• handleEvent() 把任意對象注冊為事件處理程序；
• initMouseEvent() 初始化鼠標事件對象的值；
• initKeyboardEvent() 初始化鍵盤事件對象的值；
• initMutationEvent() 初始變動事件和 HTML 事件對象的值；
• initCustomEvent() 初始自定義事件對象的值；
• removeEventListener() 刪除目標元素上的某個監(jiān)聽事件；

另外關于 createEvent 方法，根據(jù)傳入?yún)?shù)的不同，會返回不同的 event 對象：

• MouseEvents 創(chuàng)建鼠標事件對象，返回的對象中包含 initMouseEvent() 方法；
• KeyboardEvent 創(chuàng)建鍵盤事件對象，返回的對象中包含 initKeyEvent() 方法；
• KeyEvents 在 firefox 中創(chuàng)建鍵盤事件對象需要傳入該參數(shù)；
• MutationEvents 模擬變動事件和 HTML 事件的事件對象，返回的對象中包含 initMutationEvent 方法；
• CustomEvent 創(chuàng)建自定義事件對象，返回的對象中包含 initCustomEvent() 方法；

四、模擬事件

4.1 模擬鼠標事件

??我們可以通過 createEvent() 方法可以創(chuàng)建一個新的 event 對象，借助 initMouseEvent() 方法來對這個鼠標事件對象的值進行初始化，該方法接受十五個參數(shù)，分別與鼠標事件中的各個屬性一一對應，按照 type、bubbles、cancelable、view、detail、screenX、screenY、clientX、clientY、ctrlKey、altKey、shiftKey、、metaKey、button、relatedTarget 的順序傳入即可：

var oBtn = document.querySelector("button"); // 為 button 綁定事件處理程序 oBtn.addEventListener("click", function () {     console.log(event); })  var event = document.createEvent("MouseEvents"); // 通過 initMouseEvent() 方法初始化鼠標事件的 event 對象 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); // 通過 dispatchEvent() 方法來觸發(fā) oBtn 上綁定的點擊事件，此時瀏覽器打印的 event 對象為自定義的 event oBtn.dispatchEvent(event);

??初始化事件對象時，最重要的是前四個參數(shù)，因為瀏覽器在觸發(fā)事件時，這四個參數(shù)是必須的，而剩余的參數(shù)只有在事件處理程序中才會被使用，target 會在執(zhí)行 dispatchEvent 方法時自動賦值；

4.2 模擬鍵盤事件

??同樣需要先使用 createEvent() 方法可以創(chuàng)建一個新的 event 對象，但需要使用 initKeyEvent 來對鍵盤事件對象的值進行初始化，該方法接收八個參數(shù)，分別于鍵盤事件對象中的各個屬性一一對應，按照 type、bubbles、cancelable、view、key、location、modifiers、repeat的順序傳入即可。但在 firefox 中，需要按照 type、bubbles、cancelable、view、ctrlKey、altKey、shiftKey metaKey keyCode charCode ` 的順序傳入十個參數(shù)

document.onkeydown = function () {     console.log(event); }  var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown", false, false, document.defaultView, "a", 0, "Shift", 0); document.dispatchEvent(event);

4.3 模擬其他事件

??如果想要模擬其他事件，諸如 submit、focus 等 HTML 和變動事件，則需要通過 MutationEvents 方法來創(chuàng)建事件，通過 initEvent 方法來進行初始化，按照type、bubbles、cancelable、relatedNode、preValue、newValue、attrName、attrChange的順序傳入?yún)?shù)。

<input type="text">  <script>     var oInput = document.querySelector("input");     oInput.addEventListener("focus", function () {         this.style.background = "#ccc"     })     var event = document.createEvent("HTMLEvents");     event.initEvent("focus", true, false);     oInput.dispatchEvent(event); </script>

4.4 自定義 DOM 事件

??自定義事件不是由 DOM 原生觸發(fā)的，它的目的是讓開發(fā)人員創(chuàng)建自己的事件。要創(chuàng)建新的自定義事件，可以調(diào)用 createEvent("CustomEvent")，返回的對象有一個名為 initCustomEvent() 的方法，接收 type、bubbles、cancelable、detail 四個參數(shù)。

var oInput = document.querySelector("input");  oInput.addEventListener("myEvent", function () { 	console.log(event); })  var event = document.createEvent("CustomEvent"); event.initCustomEvent("myEvent", true, false, "自定義事件myEvent"); oInput.dispatchEvent(event);

??上方代碼創(chuàng)建了一個自定義事件，事件名為 myEvent ， 該事件可以向上冒泡，不可以執(zhí)行在瀏覽器中的默認行為， detail 屬性的值為 自定義事件myEvent，可以在綁定該事件的元素或者元素的父級元素上綁定事件處理程序來查看 event 對象。

五、Event的兼容性處理

??主要考慮到 IE 瀏覽器與 Chrome 等瀏覽器事件對象的區(qū)別，針對下面四個屬性，需要進行特殊處理：

• 獲得 event 對象
  var event = event || window.event;

• 獲得 target 對象
  var target = event.target || event.srcElement;

• 阻止瀏覽器默認行為
  event.preventDefault ? event.preventDefault() : (event.returnValue = false);

• 阻止事件冒泡
  event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

【