首頁 > web前端 > js教程 > 詳細解說jQuery的三種bind/One/Live事件綁定使用方法

詳細解說jQuery的三種bind/One/Live事件綁定使用方法

巴扎黑
發布: 2017-06-25 11:08:04
原創
1265 人瀏覽過

本篇文章主要是對jQuery的三種bind/One/Live事件綁定使用方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

jQuery是一款優秀的JavaScript框架,在舊版裡主要用bind()方法,在新版裡又多了兩種One(),Live(),下面介紹這幾種方法的使用:

1. bind/Unbind
#在jquery的事件模型中,有兩個基本的事件綁定函數,bind與unbind,這兩個函數的意義就是匹配頁面元素進行相關事件的處理。例如我們在JS中常用到的 onfocus,onblur,onmouseoveronmousedown等事件都可以當作bind的參數來傳遞。

$("#id").bind('click',function(){alert('tt!')});

其中bind的第一個參數代表的意思是:事件類型(注意不需要加on),function中的程式碼就是你要執行的邏輯碼
多個事件綁定:bind也允許你綁定多個事件,事件名字之間用空格隔開,例如:

$('a').bind('click mouseover',function(){

在最新的jquery1. 4版本中,對bind方法進行了改進,你可以在bind方法傳入一個類別JSON物件來一次綁定多個事件處理函數。 a').bind({

click:function(){alert('a');},

mouseover:function(){alert('a again!')}

#在function函數中,你也可以透過傳遞一個javaScript物件給function方法,這個事件物件通常是可以省略的。 ,通常為了解決在同一個方法中處理同一個變數時有很好的處理。 'click',function(){

alert(productname);

});

productname="necklace",$('#Area') .bind('click',function(){
alert(productname);
});

由於變數productname被重新賦值,所以輸出的訊息都是」necklace」,這裡不了解可以去查閱下關於JavaScript的變數作用域,要解決這個問題就必須使用到data參數,

var productname="Sports Shoes";
$ ('#Area').bind('click',{pn:productname},function(){
alert(event.data.pn);

});

productname="necklace",
$('#Area').bind('click',{pn:productname},function(){

alert(event.data.pn);

});




#2. One

為每一個符合元素的特定事件(像click)綁定一個一次性的事件處理函數。此方法與bind方法的參數一樣,與bind方法的區別就是只對匹配元素的事 件處理執行一次,執行完之後,以後再也不會執行,當然重新發起web請求時它又會執行一次。


$('a').one('click',function(){alert('a');})
點擊頁面上的a元素後,彈出訊息,除非用戶發起第二次請求,否則再次點擊a元素不會彈出訊息對話框。



3. live

此方法主要是能處理動態新增的元素,給那些後面新增的元素也一樣綁定事件。


$('a').live('click,function(){alert('show message!');})
然後如果我新增一個元素,

$('body').appnend('Another Element');

那麼該元素也會被觸發事件處理函數alert。

另外,jQuery也提供了一些綁定這些標準事件類型的簡單方式,例如.click()用於簡化.bind(‘click')。

一共有以下這些事件名稱:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, meleave, change, select, submit, keydown, keypress, keyup, error 等。

以上是詳細解說jQuery的三種bind/One/Live事件綁定使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板