首页技术文章正文

如何理解事件委托？事件委托的优缺点有哪些？

更新时间:2021年11月03日16时35分来源:传智教育浏览次数:

好口碑IT培训

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个上级元素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的上级元素而将事件委托给上级元素来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

事件委托优点：

1、减少事件注册，节省内存。比如，

2、在table上代理所有td的click事件。

3、在ul上代理所有li的click事件。

4、简化了dom节点更新时，相应事件的更新。比如

5、不用在新添加的li上绑定click事件。

6、当删除某个li时，不用移解绑上面的click事件。

事件委托缺点：

1、事件委托基于冒泡，对于不冒泡的事件不支持

2、层级过多，冒泡过程中，可能会被某层阻止掉。

3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。

4、把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。