哪种是处理事件监听器最有效的方法？

Question

我写了下面的代码：

document.addEventListener('click', function (event) {
       if(event.target.matches('#open-new-not') || event.target.matches('#close-not')){
            opnNewNot();
       }
       if(event.target-matcheS('#hide-links')){
            hideLinks();
       }
       if(...and so on...){}
});

这是一个好的解决方案吗？你能告诉我如何以最简单有效的方式处理几乎所有的事件监听器吗？

Answer 1

如果您绝对必须走这条路，那么我建议您使用 switch 语句而不是 if 的字符串。这样做的额外好处是不会中断您不想拦截的其他事件的处理。

document.addEventListener('click', function (event) {
    switch (event.target.id) {
        case 'open-new-not':
        case 'close-not':
            openNewNot();
            break;
        case 'hide-links':
            hideLinks();
            break;
        // etc
    }
});

如果我是你，我会认真考虑是否要捕获每个元素上的每个 click 事件，或者我是否可以只针对少数 select 元素而现实地逃脱.

Answer 2

由于您只匹配 ID，因此使用事件委托没有意义（除非元素是延迟加载的）。只需在元素本身上安装事件侦听器，不要在此处使用 if/else 的大型链。事件委托只会使处理许多相似元素上的事件更加高效。

哪种是处理事件监听器最有效的方法？

Which is the most efficent way to handle eventListeners?

javascript

function

click

event-listener