1.on()注册事件
之前的bind注册事件与delegate注册事件在jQuery1.7之后就被统一了,统一用on来注册事件
1.1on注册简单事件
$("").on(“click”,function(){})
例:
html:
<div>1</div>
js:
$("div").on("click",function(){
alert("1");
});
点击1弹出1提示框
1.2on注册委托事件
$("").on(“click”, ,function(){})
例:
html:
<button>用于增加p标签</button>
<div>
<p>1</p>
<p>2</p>
<div>
js:
$("div").on("click","p",function(){
alert("1");
});
无论是新的p还是旧的p点击都会出现提示框1
总结
第一个参数:事件类型
第二个参数:事件由谁来执行,没有就是自己执行
第三个参数:执行要达到的效果
on注册事件的执行顺序
on注册事件相对上一篇的bind与delegate方法是万能,这也就产生了一个问题,就是好,on注册事件的执行顺序,也就是当同时存在简单注册事件与委托事件时哪个会先执行,直接做实验。
html:
<div class="dad">
<div class="son"></div>
</div>
css:
.dad {
height: 100px;
width: 100px;
background-color: pink;
}
.son{
height: 50px;
width: 50px;
background-color: red;
}
js:
$(document).ready.(function () {
// son自己注册事件(简单事件)
$(".son").on("click", function () {
console.log("aaa")
});
//dad自己执行的(简单事件)
$(".dad").on("click", function () {
console.log("bbb")
});
//给dad里面的son执行 (委托事件)
$(".dad").on("click", ".son", function () {
console.log("ccc")
});
});
码完的效果是这样的
这个时候我们点击父div也就是粉红色的地方
可以看出只触发了 (dad自己执行的(简单事件)) 执行了。也就是只有这段代码
$(".dad").on("click", function () {
console.log("bbb")
});
执行了
到这里都没问题,问题就是这个时候我出发红色区域的点击事件之后的执行顺序,首先点击红色区域三个事件都会触发这是必然的。下面看看效果,当我点击粉红色区域时效果如下
这说明先触发了红色区域自己的注册事件( son自己注册事件(简单事件))也就是这段代码
$(".son").on("click", function () {
console.log("aaa")
});
接着触发了委托给粉红区域的红色区域的注册事件(给dad里面的son执行 (委托事件))也就是这段代码
$(".dad").on("click", ".son", function () {
console.log("ccc")
});
最后才触发粉红区域自己的注册事件(dad自己执行的(简单事件))也就是这段代码
$(".dad").on("click", function () {
console.log("bbb")
});
总结
执行的顺序是先自己的,然后委托的,父类的,由此可以看出on()注册事件实际上是一个冒泡事件。由小到大。
3.事件解绑
事件解绑是一一对应的
3.1unbind方法(对应bind注册事件方法)
解绑所有事件
$().unbind();
解绑指定事件(以解绑点击事件为例)
$().unbind("click")
3.2undelegate方法(对应delegate注册委托事件)
解绑所有事件
$().undelegate();
解绑指定事件(以解绑点击事件为例)
$().undelegate("click")
3.3off方法(对应on注册事件)
解绑所有事件
$().off();
解绑指定事件(以解绑点击事件为例)
$().off("click")
由于on方法的出现,使得bind方法与delegate方法使用量减少,从而他们两对应的解绑事件unbind方法与undelegate方法使用量也减少了