jQuery的bind()方法使用詳解

2024-05-06 16:23:10

字體：大中小

來源：轉載

供稿：網友

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

bind()方法用法詳解:

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

語法格式:

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網</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("武林網")})

})

</script>

</head>

<body>

<div>您好</div>

<input type="button" id="bt" value="點擊測試代碼" />

</body>

</html>

以上代碼中，當點擊按鈕的時候，會將div元素中的文本設置“武林網”。

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

實例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網</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="武林網";

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

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

})

})

</script>

</head>

<body>

<div>您好</div>

<input type="button" id="bt" value="點擊測試代碼" />

</body>

</html>

以上代碼利用data參數為事件處函數的事件對象提供額外的數據進行處理，同樣達到了第一個實例的效果。

綁定多個事件:

可以使用鏈式編程的方式為匹配元素綁定多個事件。代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網</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="武林網";

$("#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="點擊測試代碼" />

</body>

</html>

為按鈕綁定了兩個事件處理函數，當點擊按鈕的時候能夠重新設置div中的文本，當鼠標離開按鈕的時候，會彈出文本框。

使瀏覽器默認事件失效

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

代碼實例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>武林網</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>