前端程序員的蛻變——JS的 event 對象屬性、使用實例、兼容性處理(極大提升代碼效率、減小代碼量)

時間 2019-11-09

標籤前端程序員蛻變 event 對象屬性使用實例兼容性處理極大提升代碼效率減小欄目快樂工作简体版

原文原文鏈接

下面討論一下 js 中的 Event 對象，主要從如下三個方面詳細的描述(點擊標題可跳轉到對應部分)：
javascript

1. 什麼是event瀏覽器

　　Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態等等。說的通俗一點就是，event是JS的一個系統內置對象。平時沒法使用，當DOM元素髮生按鍵、鼠標等等各類事件時，系統會自動根據DOM元素觸發的事件生成一個event對象。而後你能夠直接取、使用這個新建立的對象去查詢一些信息或者完成一些功能(ps：固然存在瀏覽器差別，後續再說)。dom

　　那咱們執行一段簡單的代碼，瞭解一下這個 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屬性介紹。
spa

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 對象應用實例，咱們互相學習！