下面討論一下 js 中的 Event 對象，主要從以下三個方面詳細的描述(點擊標題可跳轉到對應部分)：
1. 什么是event
Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。說的通俗一點就是，event是JS的一個系統內置對象。平時無法使用，當DOM元素發生按鍵、鼠標等等各種事件時，系統會自動根據DOM元素觸發的事件生成一個event對象。然后你可以直接取、使用這個新創建的對象去查詢一些信息或者完成一些功能(ps：當然存在瀏覽器差異，后續再說)。
那我們執行一段簡單的代碼，了解一下這個 event 對象里面都有些啥：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="func()" style="width: 80px; height: 40px;">點我</button> </body> <script type="text/javascript"> function func(){ console.log(event); } </script> </html>
然后我們看一下控制台的打印結果：
這是一個很簡單的測試，從控制台的結果不難看出，這里面包含很多信息，這是以對象屬性的方式呈現的。同樣這些信息也都是 event 的屬性，可以直接通過鏈式語法點出來。所以我們在需要這些屬性信息時可以直接打印出來，然后視情況使用。
關於 event 的所有屬性，在這就不一一介紹了，W3C 介紹的很清楚，需要了解可以直接 點這里 查看 W3C 的event屬性介紹。
2. 怎么用event，用他該注意什么
要注意只有在事件發生的過程中， event對象才生效。所以我們一般通過事件綁定函數，調用函數的方式使用、查看 event 的信息。而且在IE中event是一個全局對象。就是說在你想使用他的時候可以隨時調用。不需要受什么約束。
比如下述代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="func()" style="width: 80px; height: 40px;">點我</button> </body> <script type="text/javascript"> function func(){ console.log(event.target.tagName); console.log(event.target.textContent); console.log(event.type); } </script> </html>
然后看一下效果：
這是在IE中的運行結果，很明顯，只要根據event的屬性往下查詢，就可以獲取我們想要的信息。而且這里event並沒有受到作用域的限制。說明他是全局的。這里的代碼是在button有點擊事件時，打印出，被點擊的元素名稱，執行的事件名稱，以及被點擊元素的的text值。所以event的使用特別的靈活。
再舉個例子，請看以下代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button class="but1" onclick="func()" style="width: 200px; height: 40px;">點我</button> </body> <script type="text/javascript"> function func(){ if(event.target.className=="but1"){ event.target.style.backgroundColor="red"; event.target.textContent="我的內容被修改了,而且變紅了"; event.target.className="but2"; }else{ event.target.style.backgroundColor="blue"; event.target.textContent="我的內容又被修改了,而且變藍了"; event.target.className="but1"; } } </script> </html>
然后看一下代碼的效果：
我們來解析一下這段代碼。其實很簡單，就是通過 event 的屬性對觸發事件的DOM元素進行了一系列的操作。這里通過檢測 button的class名字，對button的內容和背景色進行修改，並且修改了button的class名，進行多次判斷。這樣就產生了每次點擊使按鈕的背景色和內容顯示不同的需求了。
看到這是不是感覺很神奇。這就是 event 的神奇之處。你可以通過 event 對象進行任何你想要實現的樣式操作。不需要麻煩的取節點，不需要寫繁瑣的樣式。把你想要的操作全部封裝到一個函數中，然后通過事件調用。這種操作極其的靈活。
當然， event對象也不是萬能的，他也有他的缺陷。因為他的執行需要在事件發生之后，所以他也只能做網頁的修改，沒有觸發事件，就無法實現操作。而且，瀏覽器兼容問題也是比較令人難受的，這個我們后面再說。但是總的來說，這種編程方式在大多數情況下，能極大的提高代碼編寫速度，減少代碼量。至於能否靈活的使用，就得看各位的熟練程度了。
3. event在不同瀏覽器的兼容問題，及如何去解決
之前，我們一直沒說的就是 event 的瀏覽器兼容問題。現在我們就着重解決一下。這里就以主流瀏覽器 IE、谷歌、火狐為例介紹一下。
(1) IE 作為那個年代的瀏覽器老大哥，現在卻是我們最痛恨的瀏覽器，淚奔~~。但是在 event 這一塊，他確實做的很良心啊。請聽我慢慢道來..... 在IE中，event 是一個全局的變量，不存在作用域的問題。也就是說，誰觸發了事件，那在事件綁定的函數中，你可以直接使用event的屬性做任何操作，沒有作用域的限制，也沒有其他函數格式的要求。所以在IE中放心大膽的去用吧！
(2)Chrome 谷歌 谷歌做的也不錯，使用也沒有什么問題。在 Chrome 中，event並不是全局變量。他是在每個事件綁定的函數中都默認傳入了一個形參event，注意函數的第一個形參就是event對象，而且我們不需要去寫這個形參。如果你要在事件綁定的函數中使用 event，那直接 event . 點他的屬性即可。系統默認將event對象以參數的形式傳遞到了函數中。這里不需要你做任何操作，只管用，簡單粗暴。
這里還是再舉個例子吧，請看下邊代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="func('彈出我來')"> func </button> </body> <script type="text/javascript"> function func(haha){ alert(event.target.tagName); // 返回button名稱，因為對象里面有 tagName 這個鍵 alert(event.target); // 他返回一個對象，關於觸發這個時間的dom節點信息的對象 alert(event.type); // 返回click alert(haha); console.log(event); } </script> </html>
要注意，函數 func() 看起來只有一個形參，其實不然，他還有一個 event 形參，這是系統默認的，我們自己的形參該怎么寫怎么寫，然后在函數內部也是可以直接event 關鍵字直接使用 event 對象即可。至於其他的的工作都是瀏覽器默默做了。
這里就是強調一下 IE 和 Chrome 雖然看起來用法一樣，其實還是有本質區別的，只是瀏覽器封裝的好而已。
(3)Firebox 火狐 火狐就麻煩一點了。因為火狐中壓根就沒有event這個變量。不過解決方法也是很簡單的。想要使用 event，我們就需要先使用如下語句 var e = arguments.callee.caller.arguments[0] || window.event; 很簡單吧，加上他火狐就可以兼容了，可以和谷歌等一樣使用 event 對象。但是注意名字變了，我們這里是 e 了。當然解決方法還有別的，這個看個人喜好，你也可以修改火狐的配置。這里就不一一列舉了，有興趣的可以百度一下。
那 event 就介紹到這了，雖然只是說了點皮毛，他說的使用太靈活，只能是根據具體情況具體對待了。最后，如果本文有錯誤之處還請朋友們指出，也歡迎大家在評論區或者私信我比較好的 event 對象應用實例，我們互相學習！