原生JS事件綁定方法以及jQuery綁定事件方法bind、live、on、delegate的區別

1、原生JS事件綁定方法：

一、經過ＨＴＭＬ屬性進行事件處理函數的綁定如：　

＜a href="#" onclick="f()"＞

二、經過JavaScript對象屬性進行綁定：

var a=document.getElementById("a");
  a.onclick=function(){alert("你好！")};//這裏也能夠不用匿名的函數直接賦方法名也是能夠的

經過以上這種方式進行事件函數的綁定有個缺點就是隻能對一個元素的一個事件綁定一個事件處理程序，如

document.body.onclick=function(){
	alert("first.");
};
document.body.onclick=function(){
	alert("second.");
};

 以上這種方式後面的事件處理程序會將前面的覆蓋只會執行alert（"second"）,前面的將不會被執行，若是要註冊掉經過元素的屬性註冊的事件直接個事件屬性賦值null便可移除綁定的事件函數，經過元素的屬性註冊的事件只能發生在事件的冒泡階段。

三、利用全部文檔元素的方法進行事件綁定：

 a、addEventListener(type,handler,boolean),兼容IE之外的全部瀏覽器（因此IE瀏覽器是不能觸發捕獲階段的事件的）

 b、attachEvent（type,handler）適用於IE瀏覽器

另種方法能夠爲JS對象的一個類型事件註冊多個事件處理程序，但二者是有區別的：

（1）addEventListener中的type是不帶有on的如點擊事件直接用"click",而在attachEvent中的type是須要帶有前綴on的；（2）前者能夠接收三個參數決定事件發生的階段是在捕獲階段仍是冒泡階段,爲true則發生在捕獲階段，若是爲false則發生在冒泡階段；（3）經過addEventListener註冊的事件的執行順序與事件的註冊順序一致，即先註冊的先執行，後註冊的後執行。然後者執行的順序與註冊的順序是無關的，於是在寫代碼時代碼的執行不要依賴事件的註冊順序。（4）addEventListener對於相同的事件只會註冊一次，即便屢次的寫了註冊函數也只會成功註冊一個，然後者能夠將將相同的事件處理函數註冊屢次，而且會屢次被執行。

這兩種方法一般會被同時應用用於兼容不一樣版本的瀏覽器。如：

if(ele.addEventListener())
{
   ele.addEventListener("cilck",function(){alert("你好！")});
}
else  {
    ele.attachEvent("onclick",function(){alert("你好！")；});
}

 註銷經過上述方法註冊的事件的方法分別爲：
removeEventListener(),detach()，在這兩個方法中傳入和上面同樣的參數時就能夠註銷以前註冊的事件，可是須要注意的是若是註冊事件時事件處理函數的方法是匿名的則會沒法註銷即便將原方法傳給註銷事件函數。

2、jQuery中的註冊事件處理函數的方法：（JQ中如下的幾種綁定事件的方法咋JQ的源碼中都是調用的on）

一、$(ele).bind(type,[data],hadler)

   type：爲事件類型，事件名稱不須要加on

   data:爲可選參數，表示的時傳入事件處理程序的參數

   handler:註冊的事件處理函數

bind()方法中能夠給多個不一樣類型的事件註冊同一事件處理程序：

$("a").bind('mouseenter mouseleave',f)

 用空格將事件名隔開就好。

bind()方法能夠給第一個參數參入一個對象這樣能夠一次爲多個事件類型註冊不一樣的事件處理程序：

$("a").bind('mouseleave.my',f)

 bind()方法第一個參數type中能夠帶有命名空間用於指定給那個命名空間的這個類型事件綁定事件處理程序:

$("a").bind({mouseenter:f1,mouseleave:f2})

當引用多個命名空間時用該方法很是的有用，同時註銷事件處理程序時也能夠只註銷指定命名空間的事件處理程序。

二、$(ele).on(type,selector,[data],handler)

該方法比bind方法多了一個參selector，該參數是用於對選定的元素進行過濾，元素隊形中只有符合selector的才綁定該事件處理程序，其餘參數同bind方法。該方法是目前應用最爲普遍的。

3.$(ele).live(type,handler)

該方法直接將事件的監聽器綁定到document對象上了，並無直接綁定到元素上，元素對象觸發事件後事件進行冒泡到docuemnt時纔會執行相應的事件處理程序，這樣作的好處是新添加的符合條件的元素對象無需在對形同類型的事件處理程序進行綁定，但這樣同時會增長根節點的負擔，由於全部元素對象的處理程序只有當時間冒泡到根節點時纔會被執行，並且當子孫元素過多時，根節點可能將沒法判斷是哪一個元素的請求而致使請求錯誤。

四、$(ele).delegate(selector,type,[data],handler)

該方法經過代理的方式解決了上面live代理到document的問，selector用於指定觸發事件的元素，而調用該方法的元素對象將會成爲事件的代理，即事件的監聽器將會綁定到該元素對象上，這樣就能夠指定代理元素對象，不用將全部的事件監聽器都綁定到document上。

以上幾種註冊事件的方法對應的註銷事件方法分別爲：

一、unbing()

a、帶有一個參數時直接指定註銷事件的類型名便可，有多個時用空格隔開：

$("a").bind({'click mouseleave'})

 種種方法有個弊端當引用多個命名空間時會致使其餘模塊中鈣元素對象相同事件類型的處理程序被註銷掉了，於是能夠利用命名空間的方式刪除指定模塊下的誰極愛你處理程序：

$("a").bind({'mouseenter.my'})

 b、帶有兩個參數時：

$("a").bind('mouseenter',handler)

 當同一事件類型註冊有多個事件處理程序時，該方法能夠只註銷指定的石晶處理程序。

二、off()

三、die()

四、undelegate()

還有一些事件處理程序的綁定方法，如：one() 用於個元素對象綁定一次性事件處理程序，也就是綁定成功後該事件將只會被觸發一次；toogle()該方法用於綁定點擊事件處理函數，當傳入多個函數時，第一次單擊時執行死一個方法，第二次第二個，以此類推並循環；hover（）用於同時給mouseenter、mouseleave事件綁定事件處理函數，當只傳入一個方法時二者的處理函數相同，有兩個時第一個是mouseenter的，另外一個是mouseleave的和bind傳對象時的同樣功效。

 

$(ele).triggler/$(ele).fire這兩個方法是用於觸發事件的。