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

一、原生JS事件綁定方法:

1、通過HTML屬性進行事件處理函數的綁定如: 

<a href="#" οnclick="f()">

2、通過JavaScript對象屬性進行綁定:

var a=document.getElementById("a");
  a.οnclick=function(){alert("你好!")};//這裏也可以不用匿名的函數直接賦方法名也是可以的

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

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

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

3、利用所有文檔元素的方法進行事件綁定:

 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(),在這兩個方法中傳入和上面一樣的參數時就可以註銷之前註冊的事件,但是需要注意的是如果註冊事件時事件處理函數的方法是匿名的則會無法註銷即使將原方法傳給註銷事件函數。

二、jQuery中的註冊事件處理函數的方法:(JQ中以下的幾種綁定事件的方法咋JQ的源碼中都是調用的on)

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

   type:爲事件類型,事件名稱不需要加on

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

   handler:註冊的事件處理函數

bind()方法中可以給多個不同類型的事件註冊同一事件處理程序:

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

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

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

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

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

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

當引用多個命名空間時用該方法非常的有用,同時註銷事件處理程序時也可以只註銷指定命名空間的事件處理程序。

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

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

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

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

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

該方法通過代理的方式解決了上面live代理到document的問,selector用於指定觸發事件的元素,而調用該方法的元素對象將會成爲事件的代理,即事件的監聽器將會綁定到該元素對象上,這樣就可以指定代理元素對象,不用將所有的事件監聽器都綁定到document上。

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

1、unbing()

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

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

 種種方法有個弊端當引用多個命名空間時會導致其他模塊中鈣元素對象相同事件類型的處理程序被註銷掉了,因而可以利用命名空間的方式刪除指定模塊下的誰極愛你處理程序:

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

 b、帶有兩個參數時:

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

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

2、off()

3、die()

4、undelegate()

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

 

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章