標籤：ons 個人 樣式 朋友 代碼 結果 產生 src bsp
下面討論一下 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 language="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 language="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 language="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、Google、Firefox為例介紹一下。
(1) IE 作為那個年代的瀏覽器老大哥，現在是我們最痛恨的瀏覽器，淚奔~~。但是在 event 這一塊，他確實做的很良心啊。請聽我慢慢道來..... 在IE中，event 是一個全域的變數，不存在範圍的問題。也就是說，誰觸發了事件，那在事件綁定的函數中，你可以直接使用event的屬性做任何操作，沒有範圍的限制，也沒有其他函數格式的要求。所以在IE中放心大膽的去用吧！
(2)Chrome Google Google做的也不錯，使用也沒有什麼問題。在 Chrome 中，event並不是全域變數。他是在每個事件綁定的函數中都預設傳入了一個形參，注意函數的第一個形參就是event對象，而且我們不需要去寫這個形參。如果你要在事件綁定的函數中使用 event，那直接 event. 點他的屬性即可。系統預設將event對象以參數的形式傳遞到了函數中。這裡不需要你做任何操作，只管用，簡單粗暴。
這裡還是再舉個例子吧，請看下邊代碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="func(‘彈出我來‘)"> func </button> </body> <script language="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 Firefox Firefox就麻煩一點了。因為Firefox中壓根就沒有event這個變數。不過解決方案也是很簡單的。想要使用 event，我們就需要先使用如下語句 var e = arguments.callee.caller.arguments[0] || window.event; 很簡單吧，加上他Firefox就可以相容了，可以和Google等一樣使用 event 對象。當然解決方案還有別的，這個看個人喜好，你也可以修改Firefox的配置。這裡就不一一列舉了，有興趣的可以百度一下。
那 event 就介紹到這了，雖然只是說了點皮毛，他說的使用太靈活，只能是根據具體情況具體對待了。最後，如果本文有錯誤之處還請朋友們指出，也歡迎大家在評論區或者私信我比較好的 event 對象應用執行個體，我們互相學習！
前端程式員的蛻變——JS的 event 對象屬性、使用執行個體、相容性處理(極大提高代碼效率、減少代碼量)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
