jQuery的事件繫結和解綁

2022-08-01 10:21:14 字數 1934 閱讀 1260

語法:

bind(type,data,fn)

描述:為每乙個匹配元素的特定事件(像click)繫結乙個事件處理器函式。

引數解釋:

(string) : 事件型別

(object) : (可選) 作為event.data屬性值傳遞給事件物件的額外資料物件

( function) : 繫結到每個匹配元素的事件上面的處理函式

示例:當每個p標籤被點選的時候,彈出其文字

$("p").bind("click", function());

你可以在事件處理之前傳遞一些附加的資料。

function handler(event) 

$("p").bind("click", , handler)

通過返回false來取消預設的行為並阻止事件起泡。

$("form").bind("submit", function() )

通過使用 preventdefault() 方法只取消預設的行為。

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

語法:

unbind(type,fn);

描述:bind()的反向操作,從每乙個匹配的元素中刪除繫結的事件。

如果沒有引數,則刪除所有繫結的事件。

如果把在繫結時傳遞的處理函式作為第二個引數,則只有這個特定的事件處理函式會被刪除。

引數解釋:

(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事件

其實事件的繫結和解綁,都是我為了自定義事件做準備(大家把jquery的提供的事件熟記在心),以後對jquery熟了以後,可以玩一下自定義事件

語法:

trigger(type,data);

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

引數解釋:

(string) : 要觸發的事件型別

(array) : (可選)傳遞給事件處理函式的附加引數

示例:給乙個按鈕新增自定義的事件

$('button').bind('myclick',function(ev,a,b))

然後通過trigger()觸發自定義的事件

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

語法:

one(type,data,fn)

描述:為每乙個匹配元素的特定事件(像click)繫結乙個一次性的事件處理函式。在每個物件上,這個事件處理函式只會被執行一次。其他規則與bind()函式相同

引數解釋:

(string) : 事件型別

(object) : (可選) 作為event.data屬性值傳遞給事件物件的額外資料物件

(function) : 繫結到每個匹配元素的事件上面的處理函式

示例:當所有段落被第一次點選的時候,顯示所有其文字。

$("p").one("click", function());

事件的繫結和解綁 jQuery

之前學的滑鼠事件,表單事件與鍵盤事件都有個特點,就是直接給元素繫結乙個處理函式,所有這類事件都是屬於快捷處理。翻開原始碼其實可以看到,所有的快捷事件在底層的處理都是通過乙個 on 方法來實現的。jquery on 方法是官方推薦的繫結事件的乙個方法。基本用法 on events selector d...

繫結事件和解綁事件

繫結事件 1.物件.on 事件型別 事件處理函式 物件 on 事件型別 事件處理函式 2.物件.addeventlistener 事件型別 事件處理函式 false 火狐 谷歌 ie11支援 ie8 不支援 3.物件.attachevent on 事件型別,事件處理函式 火狐 谷歌 ie11不支援 ...

11 jQuery的事件繫結和解綁

語法 bind type,data,fn 描述 為每乙個匹配元素的特定事件 像click 繫結乙個事件處理器函式。引數解釋 string 事件型別 object 可選 作為event.data屬性值傳遞給事件物件的額外資料物件 function 繫結到每個匹配元素的事件上面的處理函式 示例 當每個p...