事件处理
- bind(type,function)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：
①type表示事件类型，多个事件类型使用空格分隔。
②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 style="border: 1px solid red;">郑州大学</div>
<script>
$("div").bind("click",function(){//绑定单击响应事件
console.log("hello");
});
</script>
</body>
</html>可以同时绑定多个不同事件类型的事件函数（通过类实现）：
<!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 style="border: 1px solid red;">郑州大学</div>
<script>
//同时绑定多个事件（将事件封装为对象）
var obj = {
mouseover:function(){
this.style.backgroundColor="blue";
},
mouseout:function(){
this.style.backgroundColor="green";
}
};
//绑定后this指向绑定的元素JavaScript对象
$("div").bind(obj);//对jQuery元素对象绑定该事件对象
</script>
</body>
</html>- unbind(type)：删除每个该元素上已绑定的type事件。
如果没有参数，则删除该元素上绑定的所有事件；
如果要删除多个事件，则每个事件以空格间隔。
<!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 style="border: 1px solid red;">郑州大学</div>
<script>
//同时绑定多个事件（将事件封装为对象）
var obj = {
mouseover:function(){
this.style.backgroundColor="blue";
},
mouseout:function(){
this.style.backgroundColor="green";
}
};
$("div").bind(obj);
$("div").unbind("mouseover mouseout");//移除两个事件
</script>
</body>
</html>- one(type,function)：该方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上,
事件处理函数只会被执行一次。
<!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 style="border: 1px solid red;">郑州大学</div>
<script>
$("div").trigger("click");//触法一个jQuery对象已经有的事件
</script>
</body>
</html>- trigger(type)：触发每一个匹配元素上某类事件，type表示一个或多个事件类型。
<!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 style="border: 1px solid red;">郑州大学</div>
<script>
$("div").one("click",function(){
console.log("123456");
});
$("div").trigger("click");//触法一个jQuery对象已经有的事件
</script>
<form id="search" action="https://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
</form>
<script>
$("#search").trigger("submit");//触发form表单的submit事件
</script>
</body>
</html>- 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 style="border: 1px solid red;">郑州大学</div>
<script>
//鼠标移上去时触发第一个函数，鼠标移下去时触发第二个函数
$("div").hover(function(){
this.style.backgroundColor="blue";
},function(){
this.style.backgroundColor="green";
});
</script>
</body>
</html>- jQuery中定义了很多事件，其常用事件如下：
①click(function) ：鼠标点击匹配元素时触发click事件。
②change(function) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发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>
<select>
<option>--请选择--</option>
<option value="001">河南省</option>
<option value="002">北京市</option>
<option value="003">河北省</option>
</select>
<script>
//直接用chang函数来为对象绑定chang事件
$("select").change(function(){
/*var array = this.options;
for(var i=0;i<array.length;i++){
var option = array[i];
if(option.selected){
console.log(option.value);
}
}*/
//通过jQuery来写
console.log($(this).val());
});
</script>
</body>
</html>③keydown(function]) ：当键盘或按钮被按下时触发keydown事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<form action="http://www.baidu.com/s">
<input type="text" name="wd" />
<input type="button" value="百度" />
</form>
<script>
//不管焦点是否在文本框上，只要按enter键就会提交
$(window).keydown(function(e){
if(e.keyCode==13){//键盘上enter键对应13
$("form").trigger("submit");
$("form").submit();
}
});
</script>
</body>
</html>④mouseout(function) ：鼠标从元素上移开时触发mouseout 事件。
⑤mouseover(function])：鼠标位于元素上方时触发mouseover 事件。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
