下面讨論一下 js 中的 Event 對象，主要從以下三個方面詳細的描述(點選标題可跳轉到對應部分)：
1.什麼是event
2.怎麼用event，用他該注意什麼，幾個簡單實際應用
3.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 對象應用執行個體，我們互相學習！