jQuery学习笔记（7.2）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(){})
例：
jquery在线免费学习
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⽅法使⽤量也减少了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。