jQuery得事件綁定

來源:互聯網
上載者:User

標籤:擷取   按鈕   false   tde   操作   div   解釋   處理器   apple   

1、 綁定事件

文法

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();});
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() );});

 

 

jQuery得事件綁定

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.