jQuery 相關(guān)控件的事件操作分解
更新時間:2009年08月03日 11:45:12 作者:
JQuery是非常棒的JS類庫,有豐富的UI庫和插件,不過我鐘愛他的是他的選擇器,感覺其他功能有時跟后臺人員距離很遠,所以一般我也只使用一下他的選擇器。
今天突然對他的事件產(chǎn)生了興趣,先前也碰到過,也沒整理,今天有空就弄一下咯。
對于控件的事件,jQuery已經(jīng)提供了豐富的方法,包括綁定、一次綁定、觸發(fā)等,阿拉今早看看叫一哪能用額伐,大蝦路古就可以了。
jQuery的綁定事件非常方便,有bind、live、one還有它幫你把一些常用的事件給單獨了出來,比如控件的onclick事件,我們綁定onclick事件的時候只需要
$("#testButton").click(function() {
alert("I'm Test Button");
});
就這樣我們在testButton這個按鈕上綁定了onclick事件,執(zhí)行alert語句。我們也可以使用$("#testButton").click();來觸發(fā)這個onclick事件,一切都非常ok啦。以上有點sb了,接下來看看取消事件。jQuery有unbind的方法,專門來取消綁定的,也就是取消事件,按照上面的例子的話,應(yīng)該使用:$("#testButton").unbind("click");恩,看上去非常好,如果你的click有2個事件的話,你還可以使用unbind("click", fnName)來刪除特定函數(shù)的綁定。為什么有這個取消特定函數(shù)的方法呢,我們來看下例子,我們會發(fā)現(xiàn),javascript的事件,跟C#的事件如出一轍,事件的綁定是疊加(+=) 而不是覆蓋。
var Eat = function() {
alert("我要吃飯");
}
var PayMoney = function() {
alert("先付錢");
}
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").bind("click", PayMoney);
});
通過上面的例子,我們發(fā)現(xiàn)會先彈出:“我要吃飯”緊接著會彈出“先付錢”,說明它的綁定是通過onclick+=fn進行的。我們修改下ready的方法:
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").unbind();
$("#testButton").bind("click", PayMoney);
});
又出錯了,呵呵,這次點擊按鈕的話,只會執(zhí)行PayMoney,不會執(zhí)行Eat,那如果把unbind()放在bind后面的話,這樣這個按鈕就不會起作用了。但如果我要去掉綁定的PayMoney方法呢?這時候我們應(yīng)該這樣寫:
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").bind("click", PayMoney);
$("#testButton").unbind("click", PayMoney);
});
嘿嘿,跟bind其實一個樣,不過接下來你將看到一個bug(我不知道算不算),讓我們近距離體驗一下
<input id="testButton" type="button" value="Test Button" onclick="Eat();" />
<script type="text/javascript">
jQuery(document).ready(function() {
$("#testButton").unbind("click", Eat);
$("#testButton").unbind();
$("#testButton").bind("click", PayMoney);
});
</script>
大家猜猜,會顯示什么?吃飯?付錢?答案是Eat -> PayMoney,?。。。∥疫@里取消了綁定,又刪除了特定的綁定,為什么還會執(zhí)行Eat呢?其中的原由要看jQuery的類庫了,我估計它只刪除了通過JQuery綁定的那些事件了,呵呵。那這時候我們該如何呢?好在jQuery有很多方法,其中一個就是attr,他是對Dom元素的屬性進行操作,我們利用attr來消除input上的click事件。 $("#testButton").attr("onclick", "");這樣就可以把onclick事件清除了,記住,attr上因為是元素的屬性,所以這里要寫 “onclick” 而不是click,因為click是jQuery封裝好的簡寫方式。好了,綁定就到這里了,弄個場景,大家也好記得住點:一日,老應(yīng)、老趙、老陳出去吃飯,吃飽了,喝足了,準(zhǔn)備付錢了,這時候
:<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var PayMoney = function(name) {
alert(name + ":今天我請客,我來付錢");
}
jQuery(document).ready(function() {
$("#JeffreyPay").attr("onclick", "");
$("#JamesPay").attr("onclick", "");
$("#JeffreyPay").click(function() {
alert("。。。。這里不能刷卡");
});
$("#JeffreyPay").click(function() {
PayMoney("陳大");
});
$("#JamesPay").bind("click", function() {
alert("。。。。忘記帶錢包了");
});
$("#JamesPay").bind("click", $("#DlyingPay").attr("onclick"));
});
</script>
</head>
<body>
<input id="JeffreyPay" onclick="PayMoney('趙帥');" type="button" value="老趙付錢" />
<input id="JamesPay" type="button" onclick="PayMoney('老應(yīng)');" value="老應(yīng)付錢" />
<input id="DlyingPay" type="button" onclick="PayMoney('陳大');" value="老陳付錢" />
</body>
以上內(nèi)容均為原創(chuàng),不要用在邪惡的地方哦。其實在綁定事件上還存在很多bug,大家可以稍微修改下上面的效果就會知道了,比如自動執(zhí)行,綁定失敗等,呵呵。
對于控件的事件,jQuery已經(jīng)提供了豐富的方法,包括綁定、一次綁定、觸發(fā)等,阿拉今早看看叫一哪能用額伐,大蝦路古就可以了。
jQuery的綁定事件非常方便,有bind、live、one還有它幫你把一些常用的事件給單獨了出來,比如控件的onclick事件,我們綁定onclick事件的時候只需要
復(fù)制代碼 代碼如下:
$("#testButton").click(function() {
alert("I'm Test Button");
});
就這樣我們在testButton這個按鈕上綁定了onclick事件,執(zhí)行alert語句。我們也可以使用$("#testButton").click();來觸發(fā)這個onclick事件,一切都非常ok啦。以上有點sb了,接下來看看取消事件。jQuery有unbind的方法,專門來取消綁定的,也就是取消事件,按照上面的例子的話,應(yīng)該使用:$("#testButton").unbind("click");恩,看上去非常好,如果你的click有2個事件的話,你還可以使用unbind("click", fnName)來刪除特定函數(shù)的綁定。為什么有這個取消特定函數(shù)的方法呢,我們來看下例子,我們會發(fā)現(xiàn),javascript的事件,跟C#的事件如出一轍,事件的綁定是疊加(+=) 而不是覆蓋。
復(fù)制代碼 代碼如下:
var Eat = function() {
alert("我要吃飯");
}
var PayMoney = function() {
alert("先付錢");
}
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").bind("click", PayMoney);
});
通過上面的例子,我們發(fā)現(xiàn)會先彈出:“我要吃飯”緊接著會彈出“先付錢”,說明它的綁定是通過onclick+=fn進行的。我們修改下ready的方法:
復(fù)制代碼 代碼如下:
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").unbind();
$("#testButton").bind("click", PayMoney);
});
又出錯了,呵呵,這次點擊按鈕的話,只會執(zhí)行PayMoney,不會執(zhí)行Eat,那如果把unbind()放在bind后面的話,這樣這個按鈕就不會起作用了。但如果我要去掉綁定的PayMoney方法呢?這時候我們應(yīng)該這樣寫:
復(fù)制代碼 代碼如下:
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").bind("click", PayMoney);
$("#testButton").unbind("click", PayMoney);
});
嘿嘿,跟bind其實一個樣,不過接下來你將看到一個bug(我不知道算不算),讓我們近距離體驗一下
復(fù)制代碼 代碼如下:
<input id="testButton" type="button" value="Test Button" onclick="Eat();" />
<script type="text/javascript">
jQuery(document).ready(function() {
$("#testButton").unbind("click", Eat);
$("#testButton").unbind();
$("#testButton").bind("click", PayMoney);
});
</script>
大家猜猜,會顯示什么?吃飯?付錢?答案是Eat -> PayMoney,?。。。∥疫@里取消了綁定,又刪除了特定的綁定,為什么還會執(zhí)行Eat呢?其中的原由要看jQuery的類庫了,我估計它只刪除了通過JQuery綁定的那些事件了,呵呵。那這時候我們該如何呢?好在jQuery有很多方法,其中一個就是attr,他是對Dom元素的屬性進行操作,我們利用attr來消除input上的click事件。 $("#testButton").attr("onclick", "");這樣就可以把onclick事件清除了,記住,attr上因為是元素的屬性,所以這里要寫 “onclick” 而不是click,因為click是jQuery封裝好的簡寫方式。好了,綁定就到這里了,弄個場景,大家也好記得住點:一日,老應(yīng)、老趙、老陳出去吃飯,吃飽了,喝足了,準(zhǔn)備付錢了,這時候
復(fù)制代碼 代碼如下:
:<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var PayMoney = function(name) {
alert(name + ":今天我請客,我來付錢");
}
jQuery(document).ready(function() {
$("#JeffreyPay").attr("onclick", "");
$("#JamesPay").attr("onclick", "");
$("#JeffreyPay").click(function() {
alert("。。。。這里不能刷卡");
});
$("#JeffreyPay").click(function() {
PayMoney("陳大");
});
$("#JamesPay").bind("click", function() {
alert("。。。。忘記帶錢包了");
});
$("#JamesPay").bind("click", $("#DlyingPay").attr("onclick"));
});
</script>
</head>
<body>
<input id="JeffreyPay" onclick="PayMoney('趙帥');" type="button" value="老趙付錢" />
<input id="JamesPay" type="button" onclick="PayMoney('老應(yīng)');" value="老應(yīng)付錢" />
<input id="DlyingPay" type="button" onclick="PayMoney('陳大');" value="老陳付錢" />
</body>
以上內(nèi)容均為原創(chuàng),不要用在邪惡的地方哦。其實在綁定事件上還存在很多bug,大家可以稍微修改下上面的效果就會知道了,比如自動執(zhí)行,綁定失敗等,呵呵。
您可能感興趣的文章:
- jquery快捷動態(tài)綁定鍵盤事件的操作函數(shù)代碼
- jQuery 選擇器、DOM操作、事件、動畫
- jquery中dom操作和事件的實例學(xué)習(xí) 下拉框應(yīng)用
- jquery中dom操作和事件的實例學(xué)習(xí)-表單驗證
- jQuery動態(tài)生成的元素綁定事件操作實例分析
- jQuery級聯(lián)操作綁定事件實例
- jquery中dom操作和事件的實例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- Jquery基礎(chǔ)之事件操作詳解
- 淺談事件冒泡、事件委托、jQuery元素節(jié)點操作、滾輪事件與函數(shù)節(jié)流
- 詳解Jquery的事件操作和文檔操作
- jQuery隨手筆記之常用的jQuery操作DOM事件
- jQuery操作事件完整實例分析
相關(guān)文章
基于jQuery實現(xiàn)交互體驗社會化分享代碼附源碼下載
基于jQuery實現(xiàn)交互體驗社會化分享代碼附源碼下載。這是一款鼠標(biāo)點擊分享按鈕向右滑出騰訊微博,新浪微博,QQ空間,豆瓣,微信,二維碼分享等分享平臺,本段代碼比較實用,需要的朋友參考下吧2016-01-01關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法,需要的朋友可以參考下2017-03-03jquery radio 動態(tài)控制選中失效問題的解決方法
下面小編就為大家分享一篇jquery radio 動態(tài)控制選中失效問題的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02jquery validate poshytip 自定義樣式
項目中做了一個jquery.validate氣泡提示在新版的jquery.validate中,有這個功能,但在我這里不怎么好用,所以自己加了一個,找了一些插件qtip2的樣式不錯,需要的朋友可以參考下2012-11-11Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
本文是對Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用進行了詳細的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11