11-jQuery的事件綁定和解綁
1、綁定事件
語法:
bind(type,data,fn)
描述:為每一個匹配元素的特定事件(像click)綁定一個事件處理器函數。
參數解釋:
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數
示例:
當每個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(); });
2、解綁事件
語法:
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() ); });
11-jQuery的事件綁定和解綁