jQuery学习笔记（7.2）on（）注册事件与相关的执行顺序与事件解绑

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方法使用量也减少了