1.bind-unbind:
bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下:
1.type表示事件类型,多个事件类型使用空格分隔;
2.data表示传递给绑定函数的额外数据对象,函数中使用event.data接收(了解);
3.fn表示绑定的函数;
<body>
<div style="border: 1px solid red;">
<span>zzu</span><br />
<span>郑州</span>
</div>
</body>
<script>
var obj={
mouseover:function(){
this.style.backgroundColor="red";
},
mouseout:function(){
this.style.backgroundColor="green";//backgroundColor用等号赋值
}
}
$("div").bind(obj);
</script>
通过bind为div标签绑定事件。
unbind(type,[data|fn]]):删除每个匹配的元素上已绑定的事件,如果没有参数,则删除该元素上绑定的所有事件。
<body>
<div style="border: 1px solid red;">
<span>zzu</span><br />
<span>郑州</span>
</div>
</body>
<script>
var obj={
mouseover:function(){
this.style.backgroundColor="red";
},
mouseout:function(){
this.style.backgroundColor="green";//backgroundColor用等号赋值
}
}
$("div").unbind(obj);
</script>
2.one:
one(type,[data],fn):该方法可以为元素绑定处理函数,当处理函数触发一次后, 立即被删除,即在每个对象上, 事件处理函数只会被执行一次。
<body>
<div style="border: 1px solid red;">
<span>zzu</span><br />
<span>郑州</span>
</div>
</body>
<script>
var obj={
mouseover:function(){
this.style.backgroundColor="red";
},
mouseout:function(){
this.style.backgroundColor="green";//backgroundColor用等号赋值
}
}
$("div").one("click",function(){
console.log("wadas");//鼠标点击时调用,且只调用一次
});
</script>
3.利用jQuery对象函数绑定
**change:**文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件;
<body>
<select id="pro">
<option value="">--请选择--</option>
<option value="1">北京市</option>
<option value="2">河南省</option>
<option value="3">河北省</option>
</select>
</body>
<script>
$("select").change(function(){//change当被选中的元素内容发生变化时,触发函数效果
var array= this.options;
for (var i=0;i<array.length;i++) {
var option=array[i];
if(option.selected){
console.log(option.value);
}
}
})
</script>
**click([[data],fn]) :**鼠标点击匹配元素时触发click事件
<body>
<select id="pro">
<option value="">--请选择--</option>
<option value="1">北京市</option>
<option value="2">河南省</option>
<option value="3">河北省</option>
</select>
</body>
<script>
$("select").click(function(){
var array= this.options;
for (var i=0;i<array.length;i++) {
var option=array[i];
if(option.selected){
console.log(option.value);
}
}
})
</script>
**keydown([[data],fn]) :**当键盘或按钮被按下时触发keydown事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<script>
$(window).keydown(function(event) {
if(event.keyCode == 13) {
console.log("Enter键");
}
});
</script>
</body>
</html>