jQuery得事件綁定

一、 綁定事件

語法

bind(type,data,fn)

描述：爲每個匹配元素得特定事件綁定一個事件處理器函數。

參數解釋：

type:事件類型

data:做爲event.data屬性值傳遞給事件對象得額外數據對象

fn: 綁定到每一個元素的事件上面的處理函數

當每一個p標籤被點擊的時候，彈出其文本

$("p").bind("click", function(){
  alert( $(this).text() );
});

你能夠在事件處理以前傳遞一些附加的數據。

function handler(event) {
//event.data 能夠獲取bind()方法的第二個參數的數據
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

經過返回false來取消默認的行爲並阻止事件起泡。

$("form").bind("submit", function() { return false; })

經過使用 preventDefault() 方法只取消默認的行爲。

$("form").bind("submit", function(event){
  event.preventDefault();
});

二、解綁事件

語法：

unbind(type,fn);

描述：

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

若是沒有參數，則刪除全部綁定的事件。

若是把在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除。

參數解釋：

type (String) : (可選) 事件類型

fn(Function) : (可選) 要從每一個匹配元素的事件中反綁定的事件處理函數

示例：

把全部段落的全部事件取消綁定

$("p").unbind()

將段落的click事件取消綁定

$("p").unbind( "click" )

刪除特定函數的綁定，將函數做爲第二個參數傳入

var foo = function () {
  //綁定事件和解綁事件的事件處理函數
};

$("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件

$("p").unbind("click", foo); // 只解綁了p段落標籤的click事件

3.自定義事件

其實事件的綁定和解綁，都是我爲了自定義事件作準備（你們把jQuery的提供的事件熟記在心），之後對jquery熟了之後，能夠玩一下自定義事件

語法：

trigger(type,data);

描述：在每個匹配的元素上觸發某類事件，它觸發的是由bind()註冊的自定義事件。

參數解釋：

type (String) : 要觸發的事件類型

data (Array) : (可選)傳遞給事件處理函數的附加參數

示例：

給一個按鈕添加自定義的事件

$('button').bind('myClick',function(ev,a,b){
    //給button按鈕添加的自定義事件myClick事件        
})
            

而後經過trigger()觸發自定義的事件

$('button').trigger('myClick',[1,2])        

 

4.補充 一次性事件

語法：

one(type,data,fn)

描述：

爲每個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。在每一個對象上，這個事件處理函數只會被執行一次。其餘規則與bind()函數相同

參數解釋：

type (String) : 事件類型

data (Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象

fn (Function) : 綁定到每一個匹配元素的事件上面的處理函數

示例：
當全部段落被第一次點擊的時候，顯示全部其文本。

$("p").one("click", function(){
//只有第一次點擊的時候纔會觸發，再次點擊不會觸發了
  alert( $(this).text() );
});