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事件，或者我是否可以仅针对少数几个选择元素来实现目标。

Answer 2

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

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

2 个答案: