前言：事件註冊的發展、on註冊事件、off解綁事件
大家都知道jQuery是對JS的事件進行了封裝，增加並擴展了事件處理機制，增強了事件的處理能力。最近看了一些關於jQuery的一些學習視頻，每一次都會有一些新的知識點。今天簡單瞭解了一下JQuery事件的發展歷史：簡單事件綁定-->bind事件綁定-->delegate事件綁定-->on事件綁定(推薦)
簡單事件綁定
從字面意思上也能看出，“簡單”，那麼語法也會很簡單。
$(selector).click(hander); //hander表示事件處理函數。
$(selector).mouseover(hander);
$(selector).mouseout(hander);
這種方式的缺點是：不能同時添加多個事件。
bind事件綁定
bind事件綁定包含兩個參數：第一個參數（事件類型），第二個參數（事件處理程序）。實例如下：
$(selector).bind("click mouseout", function(){
//事件處理方法
});
也可以這樣寫：
$(selector).bind(
{
"click": function(){
//事件處理方法
},
“mouseout”:function(){
//事件處理方法
}
});
這種方法的缺點是：不支持動態事件綁定 。
delegate註冊委託事件
delegate註冊委託事件包含三個參數：第一個參數：selector，要綁定事件的元素、第二個參數：事件類型、 第三個參數：事件處理函數。實例如下：
$("父元素").delegate("div", "click", function(){
//爲父元素下面的所有的div標籤綁定事件
});
這種方式是把事件註冊給父元素的，執行的是子元素。（支持動態事件綁定）
以上幾種註冊事件僅作爲了解，現在我們常用的事on註冊事件。
on註冊事件
on方法是在被選及子元素上添加一個或多個事件處理程序。 使用on方法添加的事件處理程序適用於當前以及未來的元素。在JQuery中，使用on統一所有事件的處理方式，主要有兩種類型：1）on註冊簡單事件 2）on註冊委託事件
on註冊簡單事件
/* * selector：表示執行事件的後代元素，若沒有後代，則自己執行 * click:傳觸發方式 * function：傳事件處理函數 */ $(selector).on( "click", function() {}); /*單個事件綁定*/ 1) $(“#id”).on(‘click’,function(){}) /*把點擊事件綁定到id爲id的元素身上*/ 2) $(“#id”).on(‘click’,’.div’,function(){}) /*把點擊事件綁定到id爲id的子級元素類名爲div的元素身上*/ /* 多事件同時綁定到一個元素上*/ ③ $(“.div”).on({ mouseover:function(){$(“body”).css(“background-color”,”red”)}, mouseout:function(){$(“body”).css(“background-color”,”yellow”);}, click:function(){$(“body”).css(“background-color”,”green”)} })on註冊委託事件
/* * selector:表示執行事件的元素，若沒有後代則自己執行 * click：表示觸發方式 * span:表示執行事件的元素（後代） * function：表示事件處理函數 */ $(selector).on( "click",“span”, function() {});on註冊事件參數的說明：$(selector).on(events[,selector][,data],handler);
- 第一個參數：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）
- 第二個參數：selector, 執行事件的後代元素（可選），如果沒有後代元素，那麼事件將有自己執行。
- 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候通過event.data來使用（不常使用）
- 第四個參數：handler，事件處理函數
參考鏈接：
off解綁事件
off() 方法通常用於移除通過 on() 方法添加的事件處理程序。語法格式如下：$(selector).off(event,selector,function(eventObj),map)
![]()
