javascript - 了解不同的事件监听器方法

Question

我对 Javascript 世界还比较陌生，有一件事让我很困惑，而且我不完全确定如何谷歌它，是......

<小时/>

这是怎么做到的:

document.querySelector('.one').addEventListener('click', function(event){
  event.preventDefault();
  this.style.textDecoration = 'underline';
}, false);

与此比较:

[].forEach.call(document.querySelectorAll('.two'), function(el){
  el.addEventListener('click', function(event){
    event.preventDefault();
    this.style.textDecoration = 'underline';
  }, false);
});

还有这个...

var func = function(event){
  event.preventDefault();
  this.style.textDecoration = 'underline';
};

document.querySelector('.three').addEventListener('click', func, false);

<小时/>

据我所知，这些都做完全相同的事情？一个比另一个更好吗？他们实际上做不同的事情吗？或者这只是更符合不同的可维护性和可扩展性方法？

...还有其他方法比这些更好吗？

FIDDLE

Answer 1

第一个片段和最后一个片段执行相同的操作，一个使用命名函数，另一个使用匿名函数，没有真正的区别。

这个

[].forEach.call(document.querySelectorAll('.two'), function(el){
    el.addEventListener('click', function(event){ ....

获取与选择器 .two 匹配的所有元素并迭代它们并向所有元素添加事件监听器。

但是这个

document.querySelector('.one').addEventListener('click', function(event){

仅获取与选择器.one匹配的第一个元素并向其添加事件处理程序，不会获取与该类匹配的任何其他元素。这是唯一真正的区别!