jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）
阳勇
一、bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数。
也可以同时给一个元素绑定多个事件，我们来看一下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<div id="bd">
百度
</div>
<script>
$("#bd").bind(
"mouseover":function(){
$(this).css("backgroundColor","red");
}
"mouseout": function(){
$(this).css("backgroundColor","green");
}
);
</script>
</body>
</html>有bind（绑定事件），就有unbind（解除事件），
//删除元素中已绑定的事件，若有多个参数，则参数之间用空格隔开，若没有参数，就直接删除该元素所有绑定的事件。
$("#bd").unbind("mouseover mouseout");二、one(type,[data],fn)：该方法与bind()方法执行方式和效果一模一样，唯一不同的就是bind()可以无限次执行，只要触发事件，就执行一次。而one()触发事件，仅仅执行一次，以后再触发该事件，也不再执行了。（one()多用于提交表单上，防止用户心急多次按提交键，重复向服务区发送请求，导致服务器的压力过大）
三、change、click、keydown
3.1 change[[data],fin]：文本框、密码框、文本域的值发生改变时或下拉列表选项发生改变时触发change事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
//文本框
<input type="text" name="text" id="text" placeholder="请输入" />
<script>
//当文本框中的值改变时，边框宽度变为10px
$("[name='text']").change(function(){
$(this).css("border-width","10px")
});
</script>
//下拉列表
<select id="province">
<option value="">请选择</option>
<option value="001">北京市</option>
<option value="002">湖北省</option>
<option value="003">河南省</option>
</select>
<script>
console.log(this);
$("select").change(function(){
//通过JavaScript对象来获取下拉选项的value值
var array = this.options;
for(var i = 0; i< array.length; i++){
var option = array[i];
if(option.selected){
console.log(option.value);
}
}
//直接通过jQuery来获取相应下拉项的value值
console.log($(this).val())
});
</script>
</body>
</html>3.2 click([[data],fn])：鼠标点击匹配元素时触发click事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<div id="bd">百度</div>
<script>
$("#bd").click(function(){
console.log(1111);
});
</script>
</body>
</html>3.3 keydown([[data],fn])：当键盘或按钮被按下时触发keydown事件。
//window指代整个窗口，keydown是按下指定键时触发方法，
//参数event是按下指定键时传过来的值
//enter键对应的值是13
$(window).keydown(function(event){
if(event.keyCode==13){
console.log("enter");
}
});3.4 hover([over],out)：over表示鼠标移到元素上触发的函数；out表示鼠标移出元素触发的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<div id="bd">百度</div>
<script>
$("div").hover(function(){
//移入时背景变红
this.style.backgroundColor="red";
},function(){
//移出时背景变绿
this.style.backgroundColor="green";
});
</script>
</body>
</html>
类似资料：