Question

我经常在我的网站中添加一堆事件监听器 - 标题菜单，侧边栏菜单，一些按钮，一些切换等。在项目结束时，可能会有一大堆事件监听器在运行在页面上。

我总是这样做：

// all of our menu items
var menuItems = document.querySelectorAll('.primary-nav a');

// loop over them
_.each (menuItems, function(item){
    // add event listener to each
    item.addEventListener('click', function(){
        console.log(item);
    });
});

所以，在给定的网站上，我可能有4-5种这样的块。将所有这些监听器放在那里更好，还是更好地监听文档并使用某种类/属性过滤？

像这样：

document.addEventListener('click', function(e){
    if ( e.target.closest('li').classList.contains('primary-nav') ) {
        // We have a primary nav item, do something with it
    }

    if ( e.target.closest('li').classList.contains('mobile-menu-toggle')) {
        // function for toggling open the mobile menu
    }
});

建议非常欢迎！

Answer 1

这取决于。你的第一个例子是更高效的，只是以非常干净的方式做你要求的。第二个例子（正如其他人所说，它是不完整的 - 没有“最接近的”方法）如果你期望DOM的结构发生变化，但又不想重新添加事件监听器，那么它会更有效。

如果您希望添加新的primary-nav或mobile-menu-toggle，那么拥有一个根侦听器将意味着即使添加/删除元素也不会更改侦听器。像JQuery这样的框架允许这样的语法：

$('body').on('click', '.primary-nav', () => {
  ..
});

同样，监听器被添加到body，但仅响应.primary-nav选择器匹配器。请记住，只有在根据页面的动态特性有意义时才应使用它;否则“点击”听众会在一个大页面上变得相当复杂。

正确的方法来添加很多事件监听器

1 个答案: