今天用jQuery 寫UI時遇到了不太熟悉的問題：如何用 jQuery 處理網頁元素的事件，以前雖然接觸過，但是有很多不明白的地方，今天就詳細研究一下。

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

1. bind/Unbind
在jquery的事件模型中，有兩個基本的事件綁定函數，bind與unbind，這兩個函數的含義就是匹配頁面元素進行相關事件的處理。比如我們在JS中經常使用到的 onfocus，onblur，onmouseover，onmousedown等事件都可以作為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方法，這個事件對象通常是可以省略的。
bind中還有一個參數data，該參數一般情況下很少使用，通常為了解決在同一個方法中處理同一個變量時有很好的處理。

var productname="Sports Shoes";
$('#Area').bind('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。

來源：A8U扎金花

原文：http://www.a8u.net/news_html/99.html

總結

以上是生活随笔為你收集整理的实例代码详解 bind(),One(),Live()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。