事件侦听器添加到文档中对元素存在检查，然后添加事件侦听器

我一直在寻找这一点，但我还没有找到答案。我想知道在Javascript中哪一种更好的做法。要添加一个事件监听目标是否为所希望的一个，将只工作：事件侦听器添加到文档中对元素存在检查，然后添加事件侦听器

document.addEventListener('click', function(e){ 
    if(e.target && e.target.classList.contains('foo')){ 

    } 
});

或创建一个变量指的是期望的元件和如果存在的话添加的事件侦听

var a = document.querySelector('.foo'); 

if (a) { 
    a.addEventListener('click', function(){ 

    }) 
}

感谢你的时间！！

2015-04-03 Merqurio

第二个不会影响调用querySelector后添加的元素。 – 2015-04-03 20:06:28

这取决于你想要什么/需要做什么，两种方式都有利弊。由于目前常见的浏览器速度更快，因此对代表团的后期过滤不会像以前那样对性能造成影响，所以现在看到越来越多的第一种模式。 – dandavis 2015-04-03 20:38:33

谢谢@dandavis！ – Merqurio 2015-04-03 20:46:17

我总是选择第一个aproach，因为它也影响动态创建的元素。我也认为你不需要条件的第一部分。我的代码如下所示：

document.addEventListener('click', function(e){ 
    if(e.target.id == "confirm-button"){ 
    // do something 
    } 
});

2016-07-25 16:39:25

回答