jQuery事件對象的作用

標籤：初學   技巧   產生   class   function   而且   委託   script   結束   

jQuery事件對象的作用

事件中的Event對象容易被初學者忽略掉，可能大多時候初學者不知道怎麼去用它，但有些時候它還是非常有用的

一個標準的"click"點擊事件

$(elem).on("click",function(event){   event //事件對象})

在不同瀏覽器之間事件對象的擷取, 以及事件對象的屬性都有差異。jQuery根據 W3C 標準規範了事件對象，所以在jQuery事件回調方法中擷取到的事件對象是經過相容後處理過的一個標準的跨瀏覽器對象

這裡不在千篇一律的說方法的使用，通過實際的一個小案例，從而來瞭解事件對象的作用

<ul>    <li class="even1"></li>    <li class="even2"></li>    <li class="even2"></li>    .........</ul>

ul有N個子項目li(這裡唯寫了3個)，如果我要響應每一個li的事件，那麼常規的方法就是需要給所有的li都單獨綁定一個事件監聽，這樣寫法很符合邏輯，但是同時有顯得繁瑣

因為li都有一個共同的父元素，而且所有的事件都是一致的，這裡我們可以採用要一個技巧來處理，也是常說的"事件委託"

事件沒直接和li元素髮生關係，而且綁定父元素了。由於瀏覽器有事件冒泡的這個特性，我們可以在觸發li的時候把這個事件往上冒泡到ul上，因為ul上綁定事件響應所以就能夠觸發這個動作了。唯一的問題怎麼才知道觸發的li元素是哪個一個？

這裡就引出了事件對象了

事件對象是用來記錄一些事件發生時的相關資訊的對象。事件對象只有事件發生時才會產生，並且只能是事件處理函數內部訪問，在所有事件處理函數運行結束後，事件對象就被銷毀

回到上面的問題，既然事件對象是跟當前觸發元素息息相關的，所以我們就能從裡面相關的資訊，從事件對象中找到 event.target

event.target

target 屬性可以是註冊事件時的元素，或者它的子項目。通常用於比較 event.target 和 this 來確定事件是不是由於冒泡而觸發的。經常用於事件冒泡時處理事件委託

簡單來說：event.target代表當前觸發事件的元素，可以通過當前元素對象的一系列屬性來判斷是不是我們想要的元素

jQuery事件對象的作用