列表元素点击事件绑定的addEventListener最优实现方案咨询

现有方案对比 #

首先直接排除示例0：行内事件处理器违背了内容与行为分离的开发原则，会导致逻辑散落在HTML结构中难以统一维护，还容易造成全局作用域污染，属于早已不推荐的过时写法。
剩下三个方案里，综合可维护性、扩展性排序是：示例3 > 示例2 > 示例1：

• 示例1的问题非常明显：用className取参数完全不可靠，后续只要给li新增任意类名（比如选中态的active类），逻辑就会直接报错。就算改用data属性取参，也存在每个列表项单独绑定事件的问题，列表项多了会增加不必要的内存占用，后续动态新增li还需要重新绑定事件。
• 示例2相比示例1解决了参数和类名绑定的问题，但还是没有解决逐个绑定事件的弊端，而且如果后续li的类名修改、或者新增li，都需要同步修改JS里的fruitList数组，维护成本不低。
• 示例3是四个现有方案里最优的：结构化配置的方式把业务逻辑和循环逻辑完全解耦，后续要调整某一项的触发事件、处理函数，只需要改配置项即可，不需要修改循环逻辑，扩展性和可维护性最好。但还是存在逐个绑定事件、动态新增元素不生效的缺陷。

我的推荐实现方案 #

我会采用事件委托 + data属性的方案，只需要给父级ul绑定1个事件监听器即可，代码如下：

HTML部分（给li新增data属性存参数） #

<ul class="fruits">
    <li class="apple" data-fruit="apple">Apple</li>
    <li class="orange" data-fruit="orange">Orange</li>
    <li class="cherry" data-fruit="cherry">Cherry</li>
    <li class="grape" data-fruit="grape">Grape</li>
    <li class="kiwi" data-fruit="kiwi">Kiwi</li>
</ul>

JS部分（事件委托实现） #

document.querySelector('.fruits').addEventListener('click', function(e) {
    // 匹配点击的li元素
    const targetLi = e.target.closest('li');
    if (targetLi && this.contains(targetLi)) {
        const fruitName = targetLi.dataset.fruit;
        show(fruitName);
    }
});

这个方案的优势非常明显：

1. 全局只有1个事件监听器，内存占用极低，就算列表有上百个项也不会有性能问题
2. 后续动态新增、删除li元素完全不需要重新绑定事件，点击逻辑自动生效
3. 用data属性存参数和类名完全解耦，后续给li加其他类名、修改样式类都不会影响业务逻辑
4. 维护成本极低，HTML新增li只要带对data-fruit属性即可，不需要修改JS代码

如果需要支持不同项有不同的处理逻辑，只要结合配置表即可，不需要调整事件绑定逻辑：

// 配置表单独维护，和事件逻辑完全解耦
const fruitHandlerMap = {
    apple: show,
    orange: show,
    cherry: handleCherryClick, // 樱桃的特殊点击逻辑
    grape: show,
    kiwi: show
}

document.querySelector('.fruits').addEventListener('click', function(e) {
    const targetLi = e.target.closest('li');
    if (targetLi && this.contains(targetLi)) {
        const fruitName = targetLi.dataset.fruit;
        const handler = fruitHandlerMap[fruitName];
        handler?.(fruitName);
    }
});

内容的提问来源于stack exchange，提问作者Rin