Detailed explanation of jQuery's bind() method

Detailed explanation of jQuery's bind() method_jquery

WBOY

Release： 2016-05-16 15:50:20

Original

1189 people have browsed it

Detailed explanation of bind() method usage:

This method is one of the more frequently used methods. Although the method is introduced in the API manual, due to the short language and insufficient detailed examples, it may not be possible to fully and accurately grasp the use of the bind() method. The following will introduce the use of this method with examples.

Grammar format:

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

Copy after login

This method can bind event handlers to specific events of all matching elements, for example:

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

Copy after login

In the above code, when the button is clicked, the text in the div element will be set to "script home".

As you can see from the syntax structure of the bind() method, there is also an optional data parameter available. This parameter can be used as the event.data attribute value to pass to the additional data object of the event object.

Examples are as follows:

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

Copy after login

The above code uses the data parameter to provide additional data for the event object of the event function for processing, and also achieves the effect of the first instance.

Bind multiple events:

You can use chain programming to bind multiple events to matching elements. The code is as follows:

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

Copy after login

Two event handling functions are bound to the button. When the button is clicked, the text in the div can be reset. When the mouse leaves the button, a text box will pop up.

Disable browser default events

For example, clicking a link to jump to a specified address and clicking the submit button to submit a form are both browser default events. However, in actual operation, these default events are not the operations we want. For example, if the form verification fails, we do not want to submit the form. At this time, you need to prevent the browser default event from occurring.

The code example is as follows:

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

Copy after login

The above is the entire content of this article, I hope you all like it.