Question

我对Javascript世界相对较新，有一件事让我很困惑，而且我并不完全确定如何 Google 它，是......

这是怎么回事：

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匹配的第一个元素，并为其添加一个事件处理程序，不会获得与该类匹配的任何其他元素。这是唯一真正的区别！

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

1 个答案: