1. 程式人生 > >jQuery(六)、事件

jQuery(六)、事件

bin down false lec data UNC key ron live

1 頁面載入

  1、ready(fn)

  當DOM載入完後綁定一個要執行的函數。

  這是事件模塊中最重要的一個函數,可以極大地提高web應用程序的響應速度。

$(document).ready(function(){......});
// $(document).ready()的簡寫,同時內部的jQuery代碼依然使用$作為別名,而不管全局的$為何
$(function($){.......});

2 事件處理

  1、on(events, [selector], [data], fn)

  在選擇元素上綁定一個或多個事件的處理函數。

  參數:

  (1) events, [selecrot], [data], fn

    events:一個或多個用空格分隔的事件類型和可選的命名空間,如 click 、keydown.myP。

    selector:一個用於過濾觸發事件的選擇器字符串。

    data:當一個事件被觸發時要傳遞event.data給事件處理函數。

    fn:該事件被觸發時執行的函數。false值也可以做為一個函數的簡寫,返回false。

  2、off(events, [selector])

  在選擇元素上移除一個或多個事件的處理函數。

  off()方法移除用 on()綁定的事件處理程序。

  3、bind(type, [data], fn)

  為每個匹配元素的特定事件綁定事件處理函數。

  參數:

  (1) type, [data], function(eventObject)

    type:含有一個或多個事件類型的字符串,多個用空格分隔。

    data:作為event.data屬性值傳遞給事件對象的額外數據對象。

    fn:函數。false值也可以做為一個函數的簡寫,返回false。

  (2) events:一個或多個事件類型的字符串和函數的數據映射。

// 同時綁定多個事件類型/處理程序
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function
(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} });

  4、one(type, [data], fn)

  為每一個匹配元素的綁定一個一次性的事件處理函數。

  5、trigger(type, [data])

  在每一個匹配的元素上觸發某類事件。

  參數:

  (1) type, [data]

    type:一個事件對象或者要觸發的事件類型

    data:傳遞給events.data的附加參數

  6、triggerHandler(type, [data])

  觸發指定的事件類型上所有綁定的處理函數。但不會執行瀏覽器默認動作,也不會產生事件冒泡。

  這個方法的行為表現與trigger類似,但有以下三個主要區別:

    - 它不會觸發瀏覽器默認事件。

    - 只觸發jQuery對象集合中 第一個 元素的事件處理函數。

    - 這個方法的返回的是事件處理函數的返回值,而不是據有可鏈性的jQuery對象。如果最開始的jQuery對象集合為空,這個方法返回 undefined。

  7、unbind(type, [data | fn])

  bind()的反向操作,從每一個匹配的元素中刪除綁定的事件。

var foo = function () {
  // 處理某個事件的代碼
};
$("p").bind("click", foo); // ... 當點擊段落的時候會觸發 foo 
$("p").unbind("click", foo); // ... 再也不會被觸發 foo

3 事件委派

  1、live(type, [data], fn)

  jQuery給所有匹配的元素附件一個事件處理函數,即使這個元素時以後再添加進來的也有效。

  這個方法基本是 bind() 方法的一個變體。使用 bind() 時,選擇器匹配的元素會附件一個事件處理函數,而以後添加進來的元素則不會有。為此需要再 bind一次。

  事件委托: 綁定在祖先元素上的事件處理函數可以對在後代上觸發的事件作出回應。傳遞給 live的事件處理函數不會綁定在元素上,而是把它作為一個特殊的事件處理函數,綁定在 DOM 數的根節點上。

  2、die([type, [fn]])

  從元素中刪除先前用 live() 綁定的事件。

  參數:

  (1) die() :異常所有live() 綁定的事件。

  (2) type,[, fn]

    type:要移除的一個或多個事件類型,多個用空格分隔。

  3、delegate(selector, [type], [data], fn)

  指定的元素(屬於被選元素的子元素)添加一個或多個事件處理函數

  參數:

  (1) selector:一個用於過濾的選擇器字符串。

  (2) type:事件類型,多個用空格分隔。

  (3) data:傳遞到函數的額外data。

  (4) fn:函數

  4、undelegate([selector, [type], fn])

  刪除由delegate() 方法添加的一個或多個事件處理程序。

  參數:

  (1) selector:一個用於過濾的選擇器字符串。

  (2) type:事件類型,多個用空格分隔。

  (3) fn:函數

  (4) undelegate():刪除所有用delegate() 方法添加的事件處理程序。

4 事件切換

  1、hover([over,] out)

  一個模範鼠標懸停事件的方法。

  參數:

  (1) over,out:鼠標移動到一個匹配的元素上面時,會觸發over函數,移出是會觸發out函數

  (2) out:移入或移出觸發函數

  2、toggle([speed], [easing], [fn])

  用於綁定兩個或多個事件處理器函數,以響應被選元素的輪流click事件。

  toggle() 如果元素是可見的,切換為隱藏;如果是隱藏的,切換為可見。

  參數:

  (1) toggle():切換顯示 / 隱藏

  (2) fn1, fn2[ ,fn2, fn4, .....]:輪流點擊函數

  (3) spend:隱藏/ 顯示 效果的速度。默認為 ‘0’ 毫秒。

  (4) easing:用來指定切換效果,默認是‘swing’,可用參數‘linear’

jQuery(六)、事件