jQuery事件中on实现绑定多个事件

相信大家都知道在jQuery1.9版本中，已经去掉了live和delegate方法，从而将on方法的地位进一步提升。

jQuery如此推崇on方法，必有其独到的地方。所以我们就有必要了解这个on，并在代码中利用它，从而优化代码和提高性能。那么接下来我们就来看看on的使用方法

一、使用on进行普通事件绑定

1.1 使用on绑定一个事件

语法结构： jq对象.on(“事件类型”,”事件处理函数”)

1.2 使用on绑定多个事件对应同一个事件处理

函数语法结构：jq对象.on(“事件类型1 事件类型2”,”事件处理函数”)

1.3 使用on绑定多个事件对应不同的事件处理函数

语法结构：

jq对象.on({

           事件类型1 : 事件处理函数1,

           事件类型2 : 事件处理函数2,

           事件类型3 : 事件处理函数3

           });

注意： 使用jQuery中on进行普通绑定事件的时候，会出现一些小小问题，就是不能给动态添加的元素绑定事件，

这时候就要用到on的事件委派（事件委托），接下来我们继续看看on对于事件委托的处理

二、 使用on进行事件委派

2.1 标准浏览器中都有事件冒泡(bubble)或捕获(propagate)机制

如图：

当目标元素被触发时，先从它祖先元素一层一层将事件传达给目标函数，如上图中P的父元素 div依次传递给target，此为事件捕获；

–当目标函数被触发后，又将事件一层一层传递到根节点，即老祖宗，此为事件冒泡。所有浏览器都有事件冒泡机制。所以，我们可以利用这一特性，优化代码，减少事件绑定。

on方法也利用了这一特性。当‘selector’被提供时，就是事件委托，事件触发时，直接绑定在on方法上的元素是不会触发该事件，而它指定的后代元素‘selector’就会利用冒泡机制，到直接绑定在on方法上的元素，给予处理。

2.2 语法结构：jq对象.on(“事件类型”,“指定的后代元素”,事件处理函数);

总结： 如果是普通绑定事件你就可以使用on的普通事件绑定，如果是对于动态添加的元素的事件绑定就使用on的事件委派。