事件的绑定

 

（作者：老薛，撰写时间：2019年6月17日）

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。而我接下来要先说的是on()的多事件绑定。

on()的多事件绑定可以在翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法：on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数。我们看下面这张截图：

                                                                                     图1

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同。我们再看下面这张截图：

                                                                                      图2

最大的不同点就是on是可以自定义事件名，当然不仅仅只是自定义事件名，继续往下看。

多个事件绑定同一个函数：

$("#elem").on("mouseover mouseout",function(){ });

然后可以通过空格分离，传递不同的事件名，可以同时绑定多个事件，而多个事件绑定不同函数，每一个事件执行自己的回调方法就可以了。

接下来我要说到给元素绑定一个点击事件 on方式。我们先看下面

                                                                                          图3

大家也看到了图3，e为事件对象事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。