jQuery的bind()方法使用詳解

更新時間：2015年07月15日 08:50:54 投稿：hebedich

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

bind()方法用法詳解:

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

語法格式:

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

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

<!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參數(shù)可供使用，此參數(shù)可以作為event.data屬性值，傳遞給事件對象的額外數(shù)據(jù)對象。

實例如下:

<!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參數(shù)為事件處函數(shù)的事件對象提供額外的數(shù)據(jù)進行處理，同樣達到了第一個實例的效果。

綁定多個事件:

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

<!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>

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

使瀏覽器默認事件失效

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

代碼實例如下:

<!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>

以上所述就是本文的全部內容了，希望大家能夠喜歡。

您可能感興趣的文章: