惊！jQuery中on方法原来是这样的。。。

对于事件的绑定在jQuery中给出了诸多的方法，但最为常用和强大的就要属今天的主角了，我们的on方法，那强大的on方法该怎么用呢？不要急，慢慢来。

首先我们要讲一讲on方法的优点了。

1. 灵活
2. 事件委托。

接着我们来讲一讲最常用的写法：

1.绑定单个事件方法

众所周知，在原生JS中绑定是这样的：

var demo1 = document.getElementById("demo1");
demo1.onclick = function(){
  console.log("我是demo1");
};

在jQuery中单个绑定事件可以是这样的：

$("#demo1").click(function(){
   console.log("我是demo1");
});

那在jQuery中的on方法是怎么样的呢？一起来看看。
先看代码：

 $("#demo1").on('click',function(){
       console.log("我是jQuery中的On方法");
});

根据上述的代码中我们可以知道了on的语法是：
元素.on(“事件”，触发事件所要干的事情);

上面讲了单个事件，接下去来说一说绑定多个事件；

2.元素绑定多个事件方法

原生js是这样的：

var demo1 = document.getElementById("demo1");
demo1.onclick = function(){
  alert("我是onclick方法");
};
demo1.onmouseenter = function(){
  alert("我是onmouseenter方法");
};

而在jQuery中的on方法是这样的：

$("#demo1").on(
   { 
     click: function() {
       console.log("我是click");}, 
     mouseenter: function() {
       console.log("我是mouseenter");} 
   }
);

根据上面的代码，我们又知道了on方法的另一种写法：
元素.on({事件:触发事件方法,事件:触发事件方法,…});

元素要绑定两个事件，但是这两个事件执行的方法都是一样的，还需要像上面那种写法？传个对象，然后一样的方法写两遍？就像下面的这段代码：

$("#demo1").on(
   { 
      click: function() {
        console.log("收到");}, 
      mouseenter: function() {
        console.log("收到");} 
    }
);

单击或者鼠标移上去都是输出【收到】；那么很明显代码重复了。可是代码这么可爱，怎么能重复呢？那么on的第三种写法来了，请看下面代码：

$("#demo1").on(
   "click mouseenter",
   function(){
     console.log("收到");
   }
);

这写法看着是不是很眼熟？是的，没错，就是前面讲过的on方法绑定单个事件的写法，不过又有些不同总结来说就是：
元素.on(“事件1 事件2 事件3 …”,前面所有事件都会触发所执行的方法);

看到这里，对于on方法的实用，是否了解了呢？最后就前面所说的on方法稍微的总结一下：

1. 元素.on(“事件”，触发事件所要干的事情);
2. 元素.on(“事件1 事件2 事件3 …”,前面所有事件都会触发所执行的方法);
3. 元素.on({事件:触发事件方法,事件:触发事件方法,…});

看文章千百遍，不如自己动手敲一遍。打开你的 txt.vsCode,WebStorm…敲一下吧。

还有一个事件委托，下次再说吧。

End；