當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery on()方法

發布時間：2025/6/15 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery on()方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery on()方法是官方推薦的綁定事件的一個方法。

$(selector).on(event,childSelector,data,function,map)

由此擴展開來的幾個以前常見的方法有.

bind()$("p").bind("click",function(){alert("The paragraph was clicked.");});$("p").on("click",function(){alert("The paragraph was clicked.");}); delegate()$("#div1").on("click","p",function(){$(this).css("background-color","pink");});
$("#div2").delegate("p","click",function(){$(this).css("background-color","pink");});live()$("#div1").on("click",function(){$(this).css("background-color","pink");});
$("#div2").live("click",function(){$(this).css("background-color","pink");});

以上三種方法在jQuery1.8之后都不推薦使用，官方在1.9時已經取消使用live()方法了，所以建議都使用on()方法。

tip:如果你需要移除on()所綁定的方法，可以使用off()方法處理。

$(document).ready(function(){$("p").on("click",function(){$(this).css("background-color","pink");});$("button").click(function(){　$("p").off("click");}); });

tip:如果你的事件只需要一次的操作，可以使用one()這個方法

$(document).ready(function(){$("p").one("click",function(){$(this).animate({fontSize:"+=6px"});}); });

trigger()綁定

$(selector).trigger(event,eventObj,param1,param2,...) $(document).ready(function(){$("input").select(function(){$("input").after(" Text marked!");});$("button").click(function(){　$("input").trigger("select");}); });

多個事件綁定同一個函數

$(document).ready(function(){$("p").on("mouseover mouseout",function(){$("p").toggleClass("intro");}); });

多個事件綁定不同函數

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

綁定自定義事件

$(document).ready(function(){$("p").on("myOwnEvent", function(event, showName){$(this).text(showName + "! What a beautiful name!").show();});$("button").click(function(){$("p").trigger("myOwnEvent",["Anja"]);}); });

傳遞數據到函數

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

適用于未創建的元素

$(document).ready(function(){$("div").on("click","p",function(){$(this).slideToggle();});$("button").click(function(){$("<p>This is a new paragraph.</p>").insertAfter("button");}); });

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

此方法可以在匹配元素上綁定一個或者多個事件處理函數。
使用off()方法可以刪除on()方法綁定的事件。

語法結構一:

復制代碼代碼如下: $(selector).on(events,[selector],[data],fn)

參數列表:

參數	描述
events	一個或多個用空格分隔的事件類型和可選的命名空間。
selector	可選。一個選擇器字符串，用以過濾選定的元素，該選擇器的后裔元素將調用處理程序。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。
data	可選。作為event.data屬性值傳遞給事件對象的額外數據對象以供事件處理函數處理。
fn	該事件被觸發時執行的函數。 false值也可以做一個函數的簡寫，返回false。

實例代碼:

實例一:

復制代碼代碼如下:
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8">
< meta name="author" content="http://www.jb51.net/" />
< title>腳本之家</title>
< style type="text/css">
div{
? width:60px;
? height:60px;
? border:1px solid green;
? font-size:12px;
}
< /style>
< script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
< script type="text/javascript">
$(document).ready(function(){
? $("div").on("click",function(){
??? $(this).text("腳本之家歡迎您");
? })
})
< /script>
< /head>
< body>
< div>原來內容</div>
< /body>
< /html>

以上代碼為div綁定一個click事件，點擊div時候能夠為div設置新的文本內容。

實例二:

復制代碼代碼如下:
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8">
< meta name="author" content="http://www.jb51.net/" />
< title>腳本之家</title>
< style type="text/css">
div{
? width:60px;
? height:60px;
? border:1px solid green;
? font-size:12px;
}
< /style>
< script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
< script type="text/javascript">
$(document).ready(function(){
? $("div").on("click mousemove",function(){
??? $(this).text("腳本之家歡迎您");
? })
})
< /script>
< /head>
< body>
< div>原來內容</div>
< /body>
< /html>

以上代碼為div綁定了兩個事件，無論是點擊div還是在div中移動鼠標都會為div設置新的文本內容。

實例三:

復制代碼代碼如下:
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8">
< meta name="author" content="http://www.jb51.net/" />
< title>腳本之家</title>
< style type="text/css">
div{
? width:60px;
? height:60px;
? border:1px solid green;
? font-size:12px;
}
< /style>
< script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
< script type="text/javascript">
$(document).ready(function(){
? var newtext="這是新文本"
? $("div").on("click",{"mytext":newtext},function(e){
??? $(this).text(e.data.mytext);
? })
})
< /script>
< /head>
< body>
? <div>原來內容</div>
< /body>
< /html>

以上代碼利用data參數為綁定的事件處理函數傳遞數據。

實例四:

復制代碼代碼如下:
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8">
< meta name="author" content="http://www.jb51.net/" />
< title>腳本之家</title>
< style type="text/css">
.parent{
? width:160px;
? height:160px;
? border:1px solid green;
? font-size:12px;
}
.children{
? width:100px;
? height:100px;
? border:1px solid red;
}
span{background-color:green;}
< /style>
< script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
< script type="text/javascript">
$(document).ready(function(){
? var newtext="這是新文本"
? $(".parent").on("click",".children",{"mytext":newtext},function(e){
??? $(this).text(e.data.mytext);
? })
})
< /script>
< /head>
< body>
< div class="parent">
? <div class="children"><span>原來內容</span></div>
< /div>
< span>大家好</span>
< /body>
< /html>

以上代碼通過通過選擇器字符串來過濾匹配元素的子元素中哪些可以響應綁定的事件。上面的代碼中，類名為children的元素和它的子元素可以調用綁定的事件。
語法結構二:

復制代碼代碼如下: $(selector).on(object,[selector],[data])

參數列表:

參數	描述
object	一個用字符串表示的，一個或多個空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數。
selector	可選。一個選擇器字符串，用以過濾選定的元素，該選擇器的后裔元素將調用處理程序。如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。
data	可選。作為event.data屬性值傳遞給事件對象的額外數據對象以供事件處理函數處理。

實例代碼:

復制代碼代碼如下:
< !DOCTYPE html>
< html>
< head>
< meta charset=" utf-8">
< meta name="author" content="http://www.jb51.net/" />
< title>腳本之家</title>
< style type="text/css">
div{
? width:160px;
? height:160px;
? border:1px solid green;
? font-size:12px;
}
< /style>
< script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
< script type="text/javascript">
$(document).ready(function(){
? var newtext="這是新文本"
? $("div").on({click:function(e){
??? $(this).text(e.data.mytext);
? }},{"mytext":newtext})
})
< /script>
< /head>
< body>
? <div>原來內容</div>
< /body>
< /html>

以上代碼中，事件類型和事件處理函數以對象的形式綁定的。

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

前幾天在看《jquery基礎教程》，看到事件委托的時候，關于live()方法講的不是很詳細，就去搜了一下關于live()和delegate()的。

然后在一處看到live()已經被移除了，囧，然后去看了最新的jq源碼，果然被移除了，現在是1.9.1版本，不知道live()是在之前哪個版本被移除的，慚愧啊，之前都沒留意。

看源碼發現bind()和delegate()都是由on()實現的。on()的描述如下：

復制代碼代碼如下:
.on( events [, selector ] [, data ], handler(eventObject) )

一個簡單的事件綁定如 $('button').on('click',function(){}); 與bind()無二樣。

在需要為較多的元素綁定事件的時候，優先考慮事件委托，可以帶來性能上的好處。比如：

???

如上圖，將click事件綁定在document對象上，頁面上任何元素發生的click事件都冒泡到document對象上得到處理。

注意到.on()的描述中第二個可選參數：selector。如下圖，添加了第二個參數，選擇符button：

結果：

當事件冒泡到document對象時，檢測事件的target，如果與傳入的選擇符（這里是button）匹配，就觸發事件，否則不觸發。

注意.on()也可以接收一個對象參數，該對象的屬性是事件類型，屬性值為事件處理函數。下面是官方文檔的一個例子：

最后有一點，原先的live()方法，處理函數是默認綁定在document對象上不能變的，如果DOM嵌套結構很深，事件冒泡通過大量祖先元素會導致較大的性能損失。而使用.on()方法，事件只會綁定到$()函數的選擇符表達式匹配的元素上（上面我的例子中，為了簡單綁定到了document），因此可以精確地定位到頁面中的一部分，而事件冒泡的開銷也可以減少。delegate()與on()同理，畢竟是用on()實現的：

總結

以上是生活随笔為你收集整理的jQuery on()方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： jQuery 事件
下一篇：浅谈Jquery中的bind(),liv