前端性能优化：使用事件委托

Dear 丶 2022-10-02 02:59 143阅读 0赞

日期：2013-7-5  来源：[GBin1.com][]

[![前端性能优化：使用事件委托][title.jpg]][title.jpg 1]

想象一下，如果你有一个无序列表，里面有一堆<li>元素，每一个<li>元素都会在点击的时候触发一个行为。这个时候， 你通常会在每一个元素上添加一个事件监听，但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢？这个时候，你在移除添加元素的同时需要处 理事件监听的移除和添加。这个时候，我们就需要引入事件委托了。

事件委托是在父级元素上添加一个事件监听，来替代在每一个子元素上添加事件监听。当事件被触发时，event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子：

// 获取元素，添加事件监听
    document.querySelector('#parent-list').addEventListener('click', function(e) {
        // e.target 是一个被点击的元素!
        // 如果它是一个列表元素
        if(e.target && e.target.tagName == 'LI') {
            // 我们找到了这个元素，对他的操作可以写在这里。
        }
    });

上面的例子是不可思议的简单，当事件发生的时候，它没有轮询父节点去寻找匹配的元素或选择器，且它不支持基于选择器的查询（例如 用class name，或者id来查询）。所有的JavaScript框架提供了委托选择器匹配。重点是，你避免了为每一个元素加载事件监听，而是在父元素上加一个事 件监听。这样大大的增加了效率，并且减少了很多维护！

下一篇我们将介绍[使用Data URI代替图片SRC][Data URI_SRC]。

via [极客社区][Link 1]

### 来源：[前端性能优化：使用事件委托][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130705-front-end-performance-optimization-7/
[title.jpg]: http://www.gbin1.com/technology/javascript/20130705-front-end-performance-optimization-7/title.jpg
[title.jpg 1]: http://www.gbin1.com/technology/javascript/20130705-front-end-performance-optimization-7/index.html
[Data URI_SRC]: http://www.gbtags.com/gb/share/1404.htm
[Link 1]: http://www.gbtags.com/gb/share/1400.htm