關(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)
一.bind()
使用方式：$(selector).bind(event,data,function)
event：必需項(xiàng)；添加到元素的一個(gè)或多個(gè)事件，例如 click,dblclick等；
單事件處理：例如 $(selector).bind("click",data,function);
多事件處理：1.利用空格分隔多事件，例如 $(selector).bind("click dbclick mouseout",data,function);
2.利用大括號(hào)靈活定義多事件，例如 $(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況；
大括號(hào)替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；
data：可選；需要傳遞的參數(shù)；
function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中bind()綁定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/*********添加單個(gè)事件處理*********/
$(".btn-test").bind("click", function () {
//顯示隱藏div
$(".container").slideToggle();
});
/********添加多個(gè)事件處理********/
//空格相隔方式
$(".btn-test").bind("mouseout click", function () {
//顯示隱藏div
$(".container").slideToggle();
});
//大括號(hào)替代方式
$(".btn-test").bind({
"mouseout": function () {
alert("這是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
});
/********刪除事件處理********/
$(".btn-test").unbind("click");
});
</script>
</head>
<body>
<input type="button" value="按鈕" class="btn-test" />
<div class="container">
</div>
</body>
</html>
適用所有版本，但是根據(jù)官網(wǎng)解釋，自從jquery1.7版本以后bind()函數(shù)推薦用on()來(lái)代替。
二.ON():
簡(jiǎn)要描述
on() 為指定的元素,添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。
使用方式
$(selector).on(event,childselector,data,function)
event：必需項(xiàng)；添加到元素的一個(gè)或多個(gè)事件，例如 click,dblclick等；
單事件處理：例如 $(selector).on("click",childselector,data,function);
多事件處理：
1.利用空格分隔多事件，例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括號(hào)靈活定義多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況；
大括號(hào)替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；
childSelector: 可選；需要添加事件處理程序的元素，一般為selector的子元素；
data：可選；需要傳遞的參數(shù)；
function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery中on()綁定事件方式</title>
<style type="text/css">
.container
{
width: 300px;
height: 300px;
border: 1px #ccc solid;
background-color: Green;
}
.btn-test
{
border: 1px #ccc solid;
padding: 5px 15px;
cursor: pointer;
}
</style>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/*********添加單個(gè)事件處理*********/
$(".header").on("click", ".btn-test", function () {
//顯示隱藏div
$(".container").slideToggle();
});
/********添加多個(gè)事件處理********/
//空格相隔方式
$(".header").on("mouseout click", ".btn-test", function () {
//顯示隱藏div
$(".container").slideToggle();
});
//大括號(hào)替代方式
$(".header").on({
"mouseout": function () {
alert("這是mouseout事件!");
},
"click": function () {
$(".container").slideToggle();
}
}, ".btn-test");
//刪除事件
$(".header").off("click", ".btn-test");
});
</script>
</head>
<body>
<div class="header">
<input type="button" value="按鈕" class="btn-test" />
</div>
<div class="container">
</div>
</body>
</html>
適用Jquery版本
jquery1.7及其以上版本；jquery1.7版本出現(xiàn)之后用于替代bind()，live()綁定事件方式；
相同點(diǎn)：
1.都支持單元素多事件的綁定；空格相隔方式或者大括號(hào)替代方式;
2.均是通過(guò)事件冒泡方式，將事件傳遞到document進(jìn)行事件的響應(yīng)；
比較和聯(lián)系:
1.bind()函數(shù)只能針對(duì)已經(jīng)存在的元素進(jìn)行事件的設(shè)置；但是live(),on(),delegate()均支持未來(lái)新添加元素的事件設(shè)置；演示代碼
如下:
2.bind()函數(shù)在jquery1.7版本以前比較受推崇，1.7版本出來(lái)之后，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)，同樣，可以
用來(lái)代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除；
3.live()函數(shù)和delegate()函數(shù)兩者類似，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些，想了解具體情況，請(qǐng)戳這：
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；
如果項(xiàng)目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來(lái)代替，以上僅為個(gè)人看法，如有不同想法，歡迎拍磚交流。
以上就是小編為大家?guī)?lái)的關(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)全部?jī)?nèi)容了，希望大家多多支持腳本之家~
- jQuery中對(duì)未來(lái)的元素綁定事件用bind、live or on
- jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
- jQuery中的on與bind綁定事件區(qū)別實(shí)例詳解
- jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
- jQuery中綁定事件bind() on() live() one()的異同
- JQuery中綁定事件（bind()）和移除事件（unbind()）
- jQuery中的bind綁定事件與文本框改變事件的臨時(shí)解決方法
- jQuery綁定事件監(jiān)聽(tīng)bind和移除事件監(jiān)聽(tīng)unbind用法實(shí)例詳解
- Jquery綁定事件(bind和live的區(qū)別介紹)
- 淺談jquery之on()綁定事件和off()解除綁定事件
- jquery綁定事件 bind和on的用法與區(qū)別分析
相關(guān)文章
這篇文章主要介紹了標(biāo)簽頁(yè)的切換方式,介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jquery實(shí)現(xiàn)奇偶行賦值不同css值
通常為了讓頁(yè)面呈現(xiàn)的更為美觀，我們喜歡在奇偶行加上不同的顏色2012-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖及其原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
jQuery 淡出一個(gè)圖像到另一個(gè)圖像的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個(gè)圖片的淡出切換效果，需要的朋友可以參考下2013-06-06
jQuery 劇場(chǎng)版 你必須知道的javascript
從零開(kāi)始學(xué)習(xí)jQuery(劇場(chǎng)版) 你必須知道的javascript2009-05-05
jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能（讓文本滾動(dòng)起來(lái)） 簡(jiǎn)單設(shè)置數(shù)值即可
這篇文章主要介紹了jQuery實(shí)現(xiàn)中獎(jiǎng)播報(bào)功能（讓文本滾動(dòng)起來(lái)） 簡(jiǎn)單設(shè)置數(shù)值即可,文中通過(guò)實(shí)例代碼給大家詳細(xì)介紹，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
checkbox想必大家對(duì)這個(gè)控件并不陌生吧，畢竟在網(wǎng)頁(yè)制作過(guò)程中經(jīng)常會(huì)使用到，下面與大家分享個(gè)示例主要介紹checkbox的使用，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery動(dòng)態(tài)修改超鏈接地址的方法,實(shí)例分析了jQuery中attr方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
這個(gè)插件主要用于解決IE5.5與IE6.0下面的png圖片無(wú)法透明的解決方法，如果您的網(wǎng)站使用了png圖片而且訪客很大一部分是IE7之前的版本，可以使用這個(gè)。2010-08-08
jquery checkbox 勾選的bug問(wèn)題解決方案與分析
本文首先由一個(gè)在項(xiàng)目中遇到的jquery checkbox 勾選的bug的解決方案，引申出jQuery中attr()和prop()的差異分析，非常的實(shí)用，需要的小伙伴快來(lái)研究下吧2014-11-11