jQuery的bind()方法使用詳解

2024-05-06 16:23:10

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

bind()定義和用法：bind() 方法向被選元素添加一個或多個事件處理程序，以及當(dāng)事件發(fā)生時運(yùn)行的函數(shù)。

bind()方法用法詳解:

此方法是使用比較頻繁的方法之一，雖然在API手冊上有著對方法的介紹，但是由于語言簡短，例子不夠詳細(xì)，可能會造成不能夠完全準(zhǔn)確的掌握bind()方法的使用，下面就結(jié)合實(shí)例介紹一下此方法的使用。

語法格式:

$(selector).bind(type,[data],function(eventObject))

此方法可以為所有匹配元素的特定事件綁定事件處理函數(shù)，例如:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網(wǎng)</title>

<style type="text/css">

div{

width:150px;

height:40px;

background-color:blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#bt").bind("click",function(){$("div").text("武林網(wǎng)")})

})

</script>

</head>

<body>

<div>您好</div>

<input type="button" id="bt" value="點(diǎn)擊測試代碼" />

</body>

</html>

以上代碼中，當(dāng)點(diǎn)擊按鈕的時候，會將div元素中的文本設(shè)置“武林網(wǎng)”。

從bind()方法的語法結(jié)構(gòu)中可以看到，還有一個可選的data參數(shù)可供使用，此參數(shù)可以作為event.data屬性值，傳遞給事件對象的額外數(shù)據(jù)對象。

實(shí)例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網(wǎng)</title>

<style type="text/css">

div{

width:150px;

height:40px;

background-color:blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var newtext="武林網(wǎng)";

$("#bt").bind("click",{"mytext":newtext},function(e){

$("div").text(e.data.mytext);

})

})

</script>

</head>

<body>

<div>您好</div>

<input type="button" id="bt" value="點(diǎn)擊測試代碼" />

</body>

</html>

以上代碼利用data參數(shù)為事件處函數(shù)的事件對象提供額外的數(shù)據(jù)進(jìn)行處理，同樣達(dá)到了第一個實(shí)例的效果。

綁定多個事件:

可以使用鏈?zhǔn)骄幊痰姆绞綖槠ヅ湓亟壎ǘ鄠€事件。代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網(wǎng)</title>

<style type="text/css">

div{

width:150px;

height:40px;

background-color:blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

var newtext="武林網(wǎng)";

$("#bt").bind("click",{"mytext":newtext},function(e){

$("div").text(e.data.mytext);

}).bind("mouseout",function(){

alert("歡迎下次光臨");

})

})

</script>

</head>

<body>

<div>您好</div>

<input type="button" id="bt" value="點(diǎn)擊測試代碼" />

</body>

</html>

為按鈕綁定了兩個事件處理函數(shù)，當(dāng)點(diǎn)擊按鈕的時候能夠重新設(shè)置div中的文本，當(dāng)鼠標(biāo)離開按鈕的時候，會彈出文本框。

使瀏覽器默認(rèn)事件失效

例如點(diǎn)擊鏈接跳轉(zhuǎn)到一個指定的地址和點(diǎn)擊提交按鈕提交表單都是瀏覽器默認(rèn)的事件。但是在實(shí)際操作過程中，這些默認(rèn)事件并非我們想要的操作，例如早表單驗(yàn)證沒有通過的時候，就不想提交表單。這個時候就需要阻止瀏覽器默認(rèn)事件的發(fā)生。

代碼實(shí)例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網(wǎng)</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(":submit").bind("click",function(){

if($("#username").val()=="")

{

alert("用戶名不能為空!");

$("#username").focus();

return false;

}

if($("#pw").val()=="")

{

alert("密碼不能為空!");

$("#pw").focus();

return false;

}

})

})

</script>

</head>

<body>

<form action="" name="myform">

<ul>

<li>用戶名:<input type="text" id="username" /></li>

<li>密碼:<input type="password" id="pw" /></li>

<li><button>提交表單</button></li>

</ul>

</form>

</body>

</html>