jQuery中on()方法用法實例詳解

更新時間：2015年02月06日 15:34:07 作者：whazhl

這篇文章主要介紹了jQuery中on()方法用法,實例分析了on()方法的功能及各種常見的使用技巧,并對比分析了與bind(),live(),delegate()等方法的區(qū)別,需要的朋友可以參考下

本文實例分析了jQuery on()方法的用法。分享給大家供大家參考。具體分析如下：

一、jQuery on()方法的使用：

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

events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發(fā)。
data:當一個事件被觸發(fā)時要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時執(zhí)行的函數(shù)。 false 值也可以做一個函數(shù)的簡寫，返回false。

二、jQuery on()方法的優(yōu)點：

1、提供了一種統(tǒng)一綁定事件的方法

2、仍然提供了.delegate()的優(yōu)點，當然如果需要你也可以直接用.bind()

三、與.bind(), .live(), .delegate()的比較：

1、其實.bind(), .live(), .delegate()都是通過.on()來實現(xiàn)的

復制代碼代碼如下:

bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },

    live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) {
        jQuery( this.context ).off( types, this.selector || "**", fn );
        return this;
    },

    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
    }

2、用.bind()的代價是非常大的，它會把相同的一個事件處理程序hook到所有匹配的DOM元素上

3、不要再用.live()了，它已經(jīng)不再被推薦了，而且還有許多問題

4、.delegate()會提供很好的方法來提高效率，同時我們可以添加一事件處理方法到動態(tài)添加的元素上。

5、我們可以用.on()來代替上述的3種方法

四、jQuery on()方法的使用示例

1、綁定click事件，使用off()方法移除on()所綁定的方法

復制代碼代碼如下:

$(document).ready(function(){

$("p").on("click",function(){

$(this).css("background-color","pink");

});

$("button").click(function(){

$("p").off("click");

});

});

2、多個事件綁定同一個函數(shù)

復制代碼代碼如下:

$(document).ready(function(){

  $("p").on("mouseover mouseout",function(){

    $("p").toggleClass("intro");

  });

});

3、多個事件綁定不同函數(shù)

復制代碼代碼如下:

$(document).ready(function(){

  $("p").on({

    mouseover:function(){$("body").css("background-color","lightgray");},  

    mouseout:function(){$("body").css("background-color","lightblue");}, 

    click:function(){$("body").css("background-color","yellow");}  

  });

});

4、綁定自定義事件

復制代碼代碼如下:

$(document).ready(function(){

  $("p").on("myOwnEvent", function(event, showName){

    $(this).text(showName + "! What a beautiful name!").show();

  });

  $("button").click(function(){

    $("p").trigger("myOwnEvent",["Anja"]);

  });

});

5、傳遞數(shù)據(jù)到函數(shù)

復制代碼代碼如下:

function handlerName(event)
{
alert(event.data.msg);
}

$(document).ready(function(){
$("p").on("click", {msg: "You just clicked me!"}, handlerName)
});

6、適用于未創(chuàng)建的元素

復制代碼代碼如下:

$(document).ready(function(){

  $("div").on("click","p",function(){

    $(this).slideToggle();

  });

  $("button").click(function(){

    $("<p>This is a new paragraph.</p>").insertAfter("button");

  });

});

希望本文所述對大家的jQuery程序設計有所幫助。

您可能感興趣的文章: