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>