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

编程问答

JQuery 对控件的事件操作

發布時間：2023/11/29 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery 对控件的事件操作小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JQuery是非常棒的js類庫，有豐富的UI庫和插件，不過我鐘愛他的是他的選擇器，感覺其他功能有時跟后臺人員距離很遠，所以一般我也只使用一下他的選擇器。

今天突然對他的事件產生了興趣，先前也碰到過，也沒整理，今天有空就弄一下咯。

對于控件的事件，jQuery已經提供了豐富的方法，包括綁定、一次綁定、觸發等，阿拉今早看看叫一哪能用額伐，大蝦路古就可以了。

jQuery的綁定事件非常方便，有bind、live、one還有它幫你把一些常用的事件給單獨了出來，比如控件的onclick事件，我們綁定onclick事件的時候只需要

$("#testButton").click(function() { alert("I'm Test Button"); }); 就這樣我們在testButton這個按鈕上綁定了onclick事件，執行alert語句。我們也可以使用 $("#testButton").click(); 來觸發這個onclick事件，一切都非常ok啦。以上有點sb了，接下來看看取消事件。jQuery有unbind的方法，專門來取消綁定的，也就是取消事件，按照上面的例子的話，應該使用： $("#testButton").unbind("click"); 恩，看上去非常好，如果你的click有2個事件的話，你還可以使用unbind("click", fnName)來刪除特定函數的綁定。為什么有這個取消特定函數的方法呢，我們來看下例子，我們會發現，javascript的事件，跟C#的事件如出一轍,事件的綁定是疊加（+=）而不是覆蓋。 var Eat = function() {alert("我要吃飯");}var PayMoney = function() {alert("");}jQuery(document).ready(function() {$("#testButton").click(Eat);$("#testButton").bind("click", PayMoney);}); 通過上面的例子，我們發現會先彈出：“我要吃飯”緊接著會彈出“先付錢”,說明它的綁定是通過onclick+=fn進行的。我們修改下ready的方法： jQuery(document).ready(function() {$("#testButton").click(Eat);$("#testButton").unbind();$("#testButton").bind("click", PayMoney);}); 又SB了，呵呵，這次點擊按鈕的話，只會執行PayMoney，不會執行Eat，那如果把unbind()放在bind后面的話，這樣這個按鈕就不會起作用了。但如果我要去掉綁定的PayMoney方法呢？這時候我們應該這樣寫： 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，啊！！！我這里取消了綁定，又刪除了特定的綁定，為什么還會執行Eat呢？其中的原由要看jQuery的類庫了，我估計它只刪除了通過JQuery綁定的那些事件了，呵呵。那這時候我們該如何呢？好在jQuery有很多方法，其中一個就是attr，他是對Dom元素的屬性進行操作，我們利用attr來消除input上的click事件。 $("#testButton").attr("onclick", ""); 這樣就可以把onclick事件清除了，記住，attr上因為是元素的屬性，所以這里要寫 “onclick” 而不是click，因為click是jQuery封裝好的簡寫方式。好了，綁定就到這里了，弄個場景，大家也好記得住點：一日，老應、老趙、老陳出去吃飯，吃飽了，喝足了，準備付錢了，這時候： <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('老應');" value="老應付錢" /><input id="DlyingPay" type="button" onclick="PayMoney('陳大');" value="老陳付錢" /> </body>

以上內容均為原創，不要用在邪惡的地方哦。其實jQuery在綁定事件上還存在很多bug，大家可以稍微修改下上面的效果就會知道了，比如自動執行，綁定失敗等，呵呵。

http:/inday.cnblogs.com

總結

以上是生活随笔為你收集整理的JQuery 对控件的事件操作的全部內容，希望文章能夠幫你解決所遇到的問題。

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