jQuery中的事件
1. 事件绑定
(1) bind(type,[data],fn)
功能:为每个选择元素的事件绑定处理函数,用法与JavaScript的事件监听很像。
type:一个或多个类型的字符串;
data:传递给事件对象的额外数据对象(可不写);
fn:处理(执行)函数
事件绑定写法
$(“.btn”).click(function(){}); | 基本写法 | $(“.btn”)表示获取要绑定事件的那个元素 |
$(“.btn”).bind(“click”,function(){}); $(“.btn”).bind(“click”,show);function show(){}; | bind()方法 | |
$(“.btn”).bind(“click mouseleave”,function(e){ if(e.type==”click”){ alert(1); }else {alert(2);} }) | bind()方法可以一次性绑定多个事件 (如何判断是那个事件?使用e.type进行判断) |
2. 切换事件
(1) hover()方法
hover(over,out)
功能:当鼠标移动到所选元素上面时,执行指定的第一个函数;当鼠标移出这个元素时,执行指定的第二个函数
(2) toggle()方法
toggle(fn1,fn2,[fn3,fn4,…])
功能:每次单击后依次调用函数
该方法在jQuery1.9版本之后就去掉了
3. 移除事件
unbind([type],[fn])
type:移除的事件类型;
fn:需要移除的事件的执行函数;
unbind()方法 | 功能 | 移除元素绑定的事件 |
带参 | 移除当前元素指定事件 | |
不带参 | 移除当前元素的所有事件 |
4. 其他事件
(1) one()方法
功能:为所选的元素绑定 一个仅触发一次的处理函数
one(type,[data],fn)
type:需要触发什么类型的事件;
data: 传递给事件对象的额外数据对象(可不写);
fn:执行函数
(2) trigger()方法
功能:在所选择的元素上触发指定类型的事件
trigger(type,[data])
type:触发事件的类型;
data: 传递给函数的附加函数(可不选);
实例:
<!DOCTYPEhtml>
<html>
<headlang="en">
<meta charset="UTF-8">
<title>jQuery事件绑定</title>
<scriptsrc="jquery-3.0.0.js"></script>
<script>
$(function (){
/*基本写法
$("#btn1").click(function(){
});*/
//通过bind() 事件绑定
/* 参数1:事件的类型
参数2:事件的执行函数*/
$("#btn1").bind("click",btnclick);
function btnclick(){
alert(1);
}
//bind() 还可以一次绑定多个事件
var a=1;
$("#btn1").bind("click",function (e){
console.log(a);
});
$("#btn1").bind("click mouseenter",function (e){
if(e.type=="click"){
alert("在单击");
}
else{
alert("鼠标进入");
}
});
//事件切换 hover() enter out
$("#btn2").hover(function(){
//鼠标进入
alert("1");
},function (){
//鼠标离开
alert("2");
});
/* unbind() 不带参数 指移除所有的事件
带参 移除指定事件*/
/*unbind() 参数2:需要移除的事件执行函数*/
$("#btn3").bind("click",btndata);
function btndata(){
alert(1);
}
$("#btn4").click(function(){
$("#btn3").unbind("click",btndata);
});
/*one方法绑定 类似于bind one方法绑定的事件 只能执行一次*/
$("#btn5").one("click",function (){
alert(1);
});
/*trigger() */ /*指定事件类型*/
$("#btn6").click(function(){
$("#text").trigger("select");
});
});
</script>
</head>
<body>
<buttonid="btn1">绑定事件</button>
<buttonid="btn2">事件切换</button>
<buttonid="btn3">移除事件</button>
<buttonid="btn4">移除</button>
<buttonid="btn5">one方法</button>
<buttonid="btn6">trigger方法</button>
<inputtype="text" id="text" value="请输入....."/>
</body>
</html>