jQuery的bind()方法用法詳解

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

語法格式:

[JavaScript] 純文字檢視 複製程式碼
$(selector).bind(type,[data],function(eventObject))

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

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>bind()-螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:40px;
  background-color:blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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屬性值，傳遞給事件物件的額外資料物件。

例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>bind()函式-螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:40px;
  background-color:blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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引數為事件處函式的事件物件提供額外的資料進行處理，同樣達到了第一個例項的效果。

繫結多個事件:

可以使用鏈式程式設計的方式為匹配元素繫結多個事件。程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>bind()函式-螞蟻部落</title>
<style type="text/css">
div{
  width:150px;
  height:40px;
  background-color:blue;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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中的文字，當滑鼠離開按鈕的時候，會彈出文字框。

使瀏覽器預設事件失效

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>bind()函式-螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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="http://www.softwhy.com" 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>

從以上程式碼可以看出，只要將函式的返回值設定為false，即可阻止預設事件的發生。

相關文章