快捷導(dǎo)航

jQuery 相關(guān)控件的事件操作分解

更新時(shí)間：2009年08月03日 11:45:12 作者：

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

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

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

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

復(fù)制代碼代碼如下:

 
$("#testButton").click(function() { 
alert("I'm Test Button"); 
}); 

就這樣我們?cè)趖estButton這個(gè)按鈕上綁定了onclick事件，執(zhí)行alert語句。我們也可以使用$("#testButton").click();來觸發(fā)這個(gè)onclick事件，一切都非常ok啦。以上有點(diǎn)sb了，接下來看看取消事件。jQuery有unbind的方法，專門來取消綁定的，也就是取消事件，按照上面的例子的話，應(yīng)該使用：$("#testButton").unbind("click");恩，看上去非常好，如果你的click有2個(gè)事件的話，你還可以使用unbind("click", fnName)來刪除特定函數(shù)的綁定。為什么有這個(gè)取消特定函數(shù)的方法呢，我們來看下例子，我們會(huì)發(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)會(huì)先彈出：“我要吃飯”緊接著會(huì)彈出“先付錢”,說明它的綁定是通過onclick+=fn進(jìn)行的。我們修改下ready的方法：

復(fù)制代碼代碼如下:

jQuery(document).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").unbind(); 
$("#testButton").bind("click", PayMoney); 
});

又出錯(cuò)了，呵呵，這次點(diǎn)擊按鈕的話，只會(huì)執(zhí)行PayMoney，不會(huì)執(zhí)行Eat，那如果把unbind()放在bind后面的話，這樣這個(gè)按鈕就不會(huì)起作用了。但如果我要去掉綁定的PayMoney方法呢？這時(shí)候我們應(yīng)該這樣寫：

復(fù)制代碼代碼如下:

jQuery(document).ready(function() { 
$("#testButton").click(Eat); 
$("#testButton").bind("click", PayMoney); 
$("#testButton").unbind("click", PayMoney); 
});

嘿嘿，跟bind其實(shí)一個(gè)樣，不過接下來你將看到一個(gè)bug（我不知道算不算），讓我們近距離體驗(yàn)一下

復(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> 

大家猜猜，會(huì)顯示什么？吃飯？付錢？答案是Eat -> PayMoney，?。。。∥疫@里取消了綁定，又刪除了特定的綁定，為什么還會(huì)執(zhí)行Eat呢？其中的原由要看jQuery的類庫了，我估計(jì)它只刪除了通過JQuery綁定的那些事件了，呵呵。那這時(shí)候我們?cè)撊绾文兀亢迷趈Query有很多方法，其中一個(gè)就是attr，他是對(duì)Dom元素的屬性進(jìn)行操作，我們利用attr來消除input上的click事件。 $("#testButton").attr("onclick", "");這樣就可以把onclick事件清除了，記住，attr上因?yàn)槭窃氐膶傩?，所以這里要寫 “onclick” 而不是click，因?yàn)閏lick是jQuery封裝好的簡(jiǎn)寫方式。好了，綁定就到這里了，弄個(gè)場(chǎng)景，大家也好記得住點(diǎn)：一日，老應(yīng)、老趙、老陳出去吃飯，吃飽了，喝足了，準(zhǔn)備付錢了，這時(shí)候

復(fù)制代碼代碼如下:

：<head>  
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>  
    <script type="text/javascript">  
        var PayMoney = function(name) {   
            alert(name + "：今天我請(qǐng)客，我來付錢");   
        }   
        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> 