(第3講)jQuery的事件


1、jQuery 通過bind()、live( )、one()、.delegate()來爲元素綁定這些事件

(1)bind( )方法用於將一個處理程序附加到每個匹配元素的事件上並返回jQuery對象。
向匹配元素添加一個或多個事件處理器
bind(eventType,[data],function)
eventType:用於指定待綁定的事件,比如常見的有:click,focus,blur等,可一次性指定多個事件,多個事件之間使用英文逗號分隔;
[data]:是可選參數,一般很少使用,當聲明該參數的時候,將允許我們傳遞額外的參數給事件處理函數。
function:是事件處理函數

(2)live( )方法將一個事件處理程序附加到與當前選擇器匹配的所有元素(包含現有的或將來添加的)的指定事件上並返回jQuery對象。

向當前或未來的匹配元素添加一個或多個事件處理器

.live(eventType,[eventData],handler)

其中,參數eventType是一個字符串,包含一個或多個javaScript事件類型,例如click,keydown或自定義事件的名稱,eventData是可選參數,爲Map類型,給出要傳遞給事件處理程序的數據,該參數是在jQuery1.4中添加的;handler是一個函數,當觸發該事件時將執行這些函數

.live()方法將事件處理程序handler附加到每個匹配元素(包含當前存在的和將來添加的)的eventType事件上,必要時還可以使用參加eventData向事件處理程序傳遞數據。

.live()方法是基本的.bind()方法的一個變形,後者可以將事件處理程序附加到元素·,當調用.bind()時,jQuery對象匹配的元素將被附加上事件處理程序,但以後添加的元素並不會被附加該事件處理程序,因此,還需要對這些元素再次調用.bind()方法。

(3).one()方法將事件處理程序附加到匹配元素的指定事件並返回jQuery對象。所附加的事件處理程序最多隻能執行一次。(附加的事件處理程序最多隻能執行一次

.one(eventType,[eventData],handler(eventObject))

其中,參數eventType是一個字符串,包含一個或多個javaScript事件類型,例如click,submit或自定義事件的名稱,指定多個事件類型時用空格分隔各個類型;eventData爲Map類型,給出要傳遞給事件處理程序的數據,handler指定觸發該事件時要執行的函數,eventObject表示事件對象。

.one()方法與.bind()類似,所不同的是,使用.one()綁定的事件處理程序在執行一次之後將自動取消綁定

(4).delegate()方法基於一組特定的根元素將處理程序附加到匹配選擇器的所有元素(現有的或將來的)的一個或多個事件上(適用於當前或未來的元素

.delegate(selector,eventType[,eventData],handler)

其中,參數 selector是一個選擇器,用於篩選觸發事件的元素;eventType是一個字符串,指定一個或多個JavaScript事件類型(多個事件用空格分隔),例如click,keydown或自定義事件名稱;eventData爲映射類型,表示要傳遞給事件處理程序的數據;handler表示觸發該事件時執行的函數。

.delegate()與.live()類似,可將每個事件的綁定委託給指定的DOM元素。

(5).on()方法  爲指定的元素,添加一個或多個事件處理程序,並規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用於當前或未來的元素
$(selector).on(event,childselector,data,function)

總結:

1、bind()函數在jquery1.7版本以前比較受推崇,1.7版本出來之後,官方已經不推薦用bind(),替代函數爲on(),這也是1.7版本新添加的函數,同樣,可以用來代替live()函數,live()函數在1.9版本已經刪除;

2.live()函數和delegate()函數兩者類似,但是live()函數在執行速度,靈活性和CSS選擇器支持方面較delegate()差些 

3.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

4.如果項目中引用jquery版本爲低版本,推薦用delegate(),高版本jquery可以使用on()來代替 


2、jQuery 通過unbind()、off()來爲元素解除綁定事件
(1).unbind()方法移除用.bind()綁定的事件
unbind:function(type,fn){
  return   this.off(type, null, fn);

使用$(selector).unbind();  件;

使用 $(selector).unbind(parameter); 來件   

 eg:

$('input').bind('click', fn1);   //當點擊input時,觸發程序fn1

$('input').bind('click', fn2);   //當點擊input時,觸發程序fn2

$('input').unbind('click', fn1);  //除 fn件 

 (2).off()方法移除用.on()綁定的事件

    off(events,[selector],[data],fn)
  events:一個或多個用空格分隔的事件類型和可選的命名空間,如"click"或"keydown.myPlugin" 。
  selector:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。如果選擇的< null或省略,當它到達選定的元素,事件總是觸發。
  data:當一個事件被觸發時要傳遞event.data給事件處理函數。
  fn:該事件被觸發時執行的函數。 false 值也可以做一個函數的簡寫,返回false。
 (3).undelegate()方法移除用.delegate()綁定的事件

       undelegate : function(selector, types,fn){

                return  arguments.length===1? this.off(selector,"*"):this.off(types,selector||"*",fn);

      }    

從源碼可以看出:

(1)unbind和undelegate方法都是通過調用調用對象的off方法來解除事件綁定的!但是unbind的selector是null表明這個事件是直接綁定在調用對象上面的,不是進行了代理的

(2)bind方法不適用於後面動態添加的對象,但是delegate適用於後面動態添加的對象,也就是動態添加的對象也會有相應的對象,因爲他是通過代理來完成的!而不是直接綁定!

(3)如果undelegate只是傳入的一個參數,那麼調用this.off( selector, "**" ) :否則調用this.off( types, selector || "**", fn );但是底層都是調用jQuery.event.remove方法


jQuery爲了更加方便的綁定事件,封裝了常用的事件,如下:  

click(fn)

觸發每一個匹配元素的 click(單擊)事件

dblclick(fn)

觸發每一個匹配元素的 dblclick(雙擊)事件

mousedown(fn)

觸發每一個匹配元素的 mousedown(點擊後)事件

mouseup(fn)

觸發每一個匹配元素的 mouseup(點擊彈起)事件

mouseover(fn)

觸發每一個匹配元素的 mouseover(鼠標移入)事件

mouseout(fn)

的 mouseout()

mousemove(fn)

元素的 mousemove()

mouseenter(fn)

的 mouseenter(穿)

mouseleave(fn)

的 mouseleave(穿)

keydown(fn)

的 keydown()

keyup(fn)

的 keyup()

keypress(fn)

的 keypress()

unload(fn)

resize(fn)

的 resize()

scroll(fn)

的 scroll(拖動)

focus(fn)

的 focus()

blur(fn)

的 blur()

focusin(fn)

的 focusin()

focusout(fn)

的 focusout()

select(fn)

的 select()

change(fn)

發每一個的 change()

submit(fn)

的 submit()


 2, 事件對象的常見屬性

  • type屬性,用於獲取事件的類型,比如說獲取點擊事件是clickevent.type();
  • event.pageX,event.pageY屬性

   event.pageX/event.pageY相當於ie中的event.x/event.x;

                       firefox中的event.pageX/event.pageY. 

  • event.target屬性,獲取觸發事件的DOM元素(注意不是jquery元素)
  • event.which屬性,用於獲取在鼠標單擊事件中,按下的鍵碼。比如左鍵=37;右鍵=39,上鍵=38,下鍵=40
  • event.originalEvent屬性,指向原始的DOM事件對象
  • event.preventDefault()方法,阻止默認事件
  • event.stopPropagation()方法,阻止冒泡
  • event.relatedTarget屬性

    在標準的DOM中,mouseover和mouseout所發生的元素可以通過event.target來訪問,相關元素是通過event.relatedTarget屬性來訪問的。event.relatedTarget方法在mouseover中相當於ie瀏覽器中的event.fromElement()方法,在mouseout中相當於ie瀏覽器的event.toElement方法,jquery對其進行了封裝,使之兼容多種瀏覽器。


 eg:

$('input').bind('click', fn1);   //當點擊input時,觸發程序fn1

$('input').bind('click', fn2);   //當點擊input時,觸發程序fn2

$('input').unbind('click', fn1);  //除 fn

發佈了84 篇原創文章 · 獲贊 21 · 訪問量 18萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章