摘要：事件的綁定和解綁的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發時把這個事件往上冒泡到上，因為上綁定事件響應，所以能觸發這個動作。

之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理。翻開源碼其實可以看到，所有的快捷事件在底層的處理都是通過一個"on"方法來實現的。jQuery on()方法是官方推薦的綁定事件的一個方法

基本用法：.on( events ,[ selector ] ,[ data ] )

最常見的給元素綁定一個點擊事件，對比一下快捷方式與on方式的不同

$("#elem").click(function(){})         // 快捷方式
$("#elem").on("click",function(){})    // on方式

on可以自定義事件名

多個事件綁定同一個函數

// 通過空格分離，傳遞不同的事件名，可以同時綁定多個事件
$("#elem").on("mouseover mouseout",function(){ });

多個事件綁定不同函數

// 通過空格分離，傳遞不同的事件名，可以同時綁定多個事件，每一個事件執行自己的回調方法
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

將數據傳遞到處理程序

function greet( event ) {
  alert( "Miami Heat -- " + event.data.name );        //Miami Heat -- D.Wade 
}
$( "button" ).on( "click", { name: "D.Wade" }, greet );

可以通過第二參數（對象），當一個事件被觸發時，要傳遞給事件處理函數的

on()的事件委托機制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二參數中提供了一個selector選擇器，簡單的來描述下

參考下面3層結構

    

        目標節點 //點擊在這個元素上
    

給出如下代碼：

$("div").on("click","p",fn)

事件綁定在最上層div元素上，當用戶觸發在a元素上，事件將往上冒泡，一直會冒泡在div元素上。如果提供了第二參數，那么事件在往上冒泡的過程中遇到了選擇器匹配的元素，將會觸發事件回調函數

通過.on()綁定的事件處理程序

通過off() 方法移除該綁定

根據on綁定事件的一些特性，off方法也可以通過相應的傳遞組合的事件名，名字空間，選擇器或處理函數來移除綁定在元素上指定的事件處理函數。當有多個過濾參數時，只有與這些參數完全匹配的事件處理函數才會被移除

綁定2個事件

$("elem").on("mousedown mouseup",fn)

刪除一個事件

$("elem").off("mousedown")

刪除所有事件

$("elem").off("mousedown mouseup")

快捷方式刪除所有事件，這里不需要傳遞事件名了，節點上綁定的所有事件講全部銷毀

$("elem").off()

標準的"click"點擊事件

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

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

    

    

    

    .........

上述ul有N個子元素li，如果需要響應每一個li的事件，那么常規的方法就是需要給所有的li都多帶帶綁定一個事件監聽，寫法符合邏輯，但繁瑣。因為li都有一個共同的父元素，而且所有的事件都是一致的，這里我們可以采用要一個技巧來處理，也是常說的"事件委托"

事件沒直接和li元素發生關系，而且綁定父元素了。由于瀏覽器事件冒泡特性，可以在觸發li時把這個事件往上冒泡到ul上，因為ul上綁定事件響應，所以能觸發這個動作。

事件對象
怎么才知道觸發的li元素是哪個一個？這個問題引出了事件對象

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

事件對象是跟當前觸發元素息息相關的，能從里面獲取相關的信息，找到 event.target

event.target

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

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

    
    
    
    



    
事件委托，通過事件對象區別觸發元素
    

        

            

                
點擊：觸發一
                
點擊：觸發二
                
點擊：觸發三
                
點擊：觸發四
            
        
    

    

event.type：獲取事件的類型

觸發元素的事件類型

$("a").click(function(event) {
  alert(event.type);        // "click"事件
});

event.pageX 和 event.pageY：獲取鼠標當前相對于頁面的坐標

通過這2個屬性，可以確定元素在當前頁面的坐標值，鼠標相對于文檔的左邊緣的位置（左邊）與 （頂邊）的距離，簡單來說是從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化

event.preventDefault() 方法：阻止默認行為

這個用的特別多，在執行這個方法后，如果點擊一個鏈接（a標簽），瀏覽器不會跳轉到新的 URL 去了。我們可以用 event.isDefaultPrevented() 來確定這個方法是否(在那個事件對象上)被調用過了

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，為防止事件冒泡到DOM樹上，也就是不觸發的任何前輩元素上的事件處理函數

event.which：獲取在鼠標單擊時，單擊的是鼠標的哪個鍵

event.which 將 event.keyCode 和 event.charCode 標準化了。event.which也將正常化的按鈕按下(mousedown 和 mouseupevents)，左鍵報告1，中間鍵報告2，右鍵報告3

event.currentTarget : 在事件冒泡過程中的當前DOM元素

冒泡前的當前觸發事件的DOM對象, 等同于this.

this和event.target的區別：

js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

.this和event.target都是dom對象

如果要使用jquey中的方法可以將他們轉換為jquery對象。比如this和$(this)的使用、event.target和$(event.target)的使用；

類似于mousedown、click、keydown等等這類型的事件都是瀏覽器提供的，通俗叫原生事件，這類型的事件是需要有交互行為才能被觸發

在jQuery通過on方法綁定一個原生事件

$("#elem").on("click", function() {
    alert("觸發系統事件")
 });

alert需要執行的條件：必須有用戶點擊才可以。如果不同用戶交互是否能在某一時刻自動觸發該事件呢？正常來說是不可以的，但是jQuery解決了這個問題，提供了一個trigger方法來觸發瀏覽器事件

$("#elem").trigger("click");
//在綁定on的事件元素上，通過trigger方法就可以調用到alert

.trigger定義

根據綁定到匹配元素的給定的事件類型執行所有的處理程序和行為

trigger除了能夠觸發瀏覽器事件，同時還支持自定義事件，并且自定義時間還支持傳遞參數

$("#elem").on("Jeremy", function(event,arg1,arg2) {
    alert("自觸自定義時間")
 });
$("#elem").trigger("Jeremy",["參數1","參數2"])

trigger觸發瀏覽器事件與自定義事件的區別

自定義事件對象，是jQuery模擬原生實現的

自定義事件可以傳遞參數

trigger事件還有一個特性：會在DOM樹上冒泡，所以如果要阻止冒泡就需要在事件處理程序中返回false或調用事件對象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有觸發原生與自定義能力的，但是存在一個不可避免的問題： 事件對象event無法完美的實現，畢竟一個是瀏覽器給的，一個是自己模擬的。盡管 .trigger() 模擬事件對象，但是它并沒有完美的復制自然發生的事件，若要觸發通過 jQuery 綁定的事件處理函數，而不觸發原生的事件，使用.triggerHandler() 來代替

triggerHandler與trigger的用法是一樣的，重點看不同之處：

triggerHandler不會觸發瀏覽器的默認行為，.triggerHandler( "submit" )將不會調用表單上的.submit()

.trigger() 會影響所有與 jQuery 對象相匹配的元素，而 .triggerHandler() 僅影響第一個匹配到的元素

使用 .triggerHandler() 觸發的事件，并不會在 DOM 樹中向上冒泡。如果它們不是由目標元素直接觸發的，那么它就不會進行任何處理

與普通的方法返回 jQuery 對象(這樣就能夠使用鏈式用法)相反，.triggerHandler() 返回最后一個處理的事件的返回值。如果沒有觸發任何事件，會返回 undefined

    
    
    
    



自定義事件triggerHandler

    

        triggerHandler事件
        
    
    事件冒泡,觸發瀏覽器默認聚焦行為


    不會冒泡，不觸發瀏覽器默認聚焦行為