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

超、凢脫俗 2021-06-26 16:06 613阅读 0赞

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

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

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

### 1.1 使用`on`绑定一个事件 ###

语法结构： jq对象.on(“事件类型”,”事件处理函数”)  
![在这里插入图片描述][20190115135548936.png]

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

函数语法结构：jq对象.on(“事件类型1 事件类型2”,”事件处理函数”)  
![在这里插入图片描述][20190115135641622.png]

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

语法结构：

jq对象.on({ 
    
               事件类型1 : 事件处理函数1,
    
               事件类型2 : 事件处理函数2,
    
               事件类型3 : 事件处理函数3
    
               });

![在这里插入图片描述][20190115135746394.png]

注意： 使用`jQuery`中`on`进行普通绑定事件的时候，会出现一些小小问题，就是不能给动态添加的元素绑定事件，  
![在这里插入图片描述][20190115135836398.png]

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

## 二、 使用`on`进行事件委派 ##

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

如图：  
![在这里插入图片描述][20190115135905194.png]

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

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

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

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

![在这里插入图片描述][20190115140332114.png]

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

[20190115135548936.png]: /images/20210626/6dc6a62d013344b09e9f2aa336b28658.png
[20190115135641622.png]: /images/20210626/519d3b90f917473dbb8ebdb4e06b43df.png
[20190115135746394.png]: /images/20210626/100ca3ac743c4d4688a3796312c5f7c4.png
[20190115135836398.png]: /images/20210626/75b14110d5f14b26b206f209aebff1f9.png
[20190115135905194.png]: /images/20210626/8088aee5f93542dd90c8999e0912c74d.png
[20190115140332114.png]: /images/20210626/7739932eab454b42b2edd38c2f4f65f8.png