jQuery中bind/One/Live/On事件綁定怎么用

這篇文章主要介紹了jQuery中bind/One/Live/On事件綁定怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

瀏覽jQuery的deprecated列表，發(fā)現(xiàn)live()和die()在里面了，趕緊看了一下，發(fā)現(xiàn)從jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off()兩個函數(shù)統(tǒng)一處理事件綁定。因為在此之前有bind(),
live(),

delegate()等方法來處理事件綁定，jQuery從性能優(yōu)化以及方式統(tǒng)一方面考慮決定推出新的函數(shù)來統(tǒng)一事件綁定方法并且替換掉以前的方法。

on(events,[selector],[data],fn)

events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。

selector:一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略，當(dāng)它到達選定的元素，事件總是觸發(fā)。

data:當(dāng)一個事件被觸發(fā)時要傳遞event.data給事件處理函數(shù)。

fn:該事件被觸發(fā)時執(zhí)行的函數(shù)。 false 值也可以做一個函數(shù)的簡寫，返回false。

替換bind()

當(dāng)?shù)诙€參數(shù)'selector'為null時，on()和bind()其實在用法上基本上沒有任何區(qū)別了，所以我們可以認(rèn)為on()只是比bind()多了一個可選的'selector'參數(shù)，所以on()可以非常方便的換掉bind()

替換live()

在1.4之前相信大家非常喜歡使用live(),因為它可以把事件綁定到當(dāng)前以及以后添加的元素上面，當(dāng)然在1.4之后delegate()也可以做類似的事情了。live()的原理很簡單，它是通過document進行事件委派的，因此我們也可以使用on()通過將事件綁定到document來達到live()一樣的效果。

 live()寫法

 $('#list li').live('click', '#list li', 
function() {
 //function code here.
});

on()寫法

$(document).on('click', '#list li', 
function() {
 //function code 
here.
});

這里的關(guān)鍵就是第二個參數(shù)'selector'在起作用了。它是一個過濾器的作用，只有被選中元素的后代元素才會觸發(fā)事件。

替換delegate()

delegate()是1.4引入的，目的是通過祖先元素來代理委派后代元素的事件綁定問題，某種程度上和live()優(yōu)點相似。只不過live()是通過document元素委派，而delegate則可以是任意的祖先節(jié)點。使用on()實現(xiàn)代理的寫法和delegate()基本一致。

delegate()的寫法

$('#list').delegate('li', 'click', 
function() {
 //function code here.
});

on()寫法

$('#list').on('click', 'li', function() 
{
 //function code here.
});

貌似第一個和第二個參數(shù)的順序顛倒了一下，別的基本一樣。

總結(jié)

jQuery推出on()的目的有2個，一是為了統(tǒng)一接口，二是為了提高性能，所以從現(xiàn)在開始用on()替換bind(),
live(),

delegate吧。尤其是不要再用live()了，因為它已經(jīng)處于不推薦使用列表了，隨時會被干掉。如果只綁定一次事件，那接著用one()吧，這個沒有變化。

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

1. bind/Unbind

在jquery的事件模型中，有兩個基本的事件綁 定函數(shù)，bind與unbind，這兩個函數(shù)的含義就是匹配頁面元素進行相關(guān)事件的處理。比如我們在JS中經(jīng)常使用到的 onfocus，onblur，onmouseover，onmousedown等事件都可以作為bind的參數(shù)進行傳遞。

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

其中bind的第一個參數(shù)代表的含義是：事件類型(注意不需要加on)，function中的代碼就是你要執(zhí)行的邏輯 代碼
多個事件綁定：bind還允許你綁定多個事件，事件名字之間用空格隔開，例如：

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

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

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}

在function函數(shù)中，你還可以通過傳遞一個javaScript對 象給function方法，這個事件對象通常是可以省略的。
bind中還有一個參數(shù)data， 該參數(shù)一般情況下很少使用，通常為了解決在同一個方法中處理同一個變量時有很好的處理。

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

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

由于變量productname被重新賦值，所以輸出的消息都是”necklace”,這里不了解可以去查閱下關(guān)于JavaScript的變量作用域,要 解決這個問題就必須使用到data參數(shù)，

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）綁定一個一次性的事件處理函數(shù)。該方法與bind方法的參數(shù)一樣，與bind方法的區(qū)別就是只對匹配元素的事 件處理執(zhí)行一次，執(zhí)行完之后，以后再也不會執(zhí)行,當(dāng)然重新發(fā)起web請求時它又會執(zhí)行一次。

$('a').one('click',function(){
alert('a');
})

單擊頁面上的a元素后，彈出消息，除非用戶發(fā)起第二次請求，否則再次點擊a元素不會彈出消息對話框。

3. live

該方法主要是能處理動態(tài)添加的元素，給那些后添加的元素也一樣綁定事件。

$('a').live('click,function(){
alert('show message!');
})

然后如果我添加一個元素，

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

那么該元素也會被觸發(fā)事件處理函數(shù)alert。
另外，jQuery還提供了一些綁定這些標(biāo)準(zhǔn)事件類型的簡單方式，比如.click()用于簡化.bind(‘click')。

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

下面看下jQuery中綁定事件bind() on() live() one()的異同

jQuery中綁定事件的四種方法，他們可以同時綁定一個或多個事件

      bind()-------------------------版本號小于3.0（在Jquery3.0中已經(jīng)移除，相應(yīng)unbind()也移除）

       live()--------------------------版本號小于1.7（在Jquery1.7中已經(jīng)移除，相應(yīng)die()也移除）

       delegate()-------------------版本號小于1.7（在Jquery1.7中已經(jīng)移除）

       on()---------------------------版本號大于1.7（在Jquery1.7中添加，相應(yīng)off()也添加）

A：bind()事件的用法

<title>綁定事件</title>
 <script src="js/jQuery1.11.1.js" type="text/javascript"></script>
 <script>
  $(function () {
   $("p").bind({
    "mouseover": function () {
     $("p").css("background-color", "red");
    },
    "mouseout": function () {
     $("p").css("background-color", "");
    }
   });
  });
 </script>
</head>
<body>
 <p>what are you doing?</p>
</body>
</html>

第一個最大的區(qū)別就是：bind()的事件綁定是只對當(dāng)前頁面選中的元素有效。如果你想對動態(tài)創(chuàng)建的元素bind()事件，是沒有辦法達到效果的。

在后面的動態(tài)生成DOM元素綁定事件就要使用on();

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery中bind/One/Live/On事件綁定怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!