了解不同的事件监听器接近

我是比较新的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

来源

2015-04-02 darcher

一个作品，另外两个不？除非你只是错过键入示例代码 – 2015-04-02 18:38:05

'[] .forEach（...'意味着“Do ??? 0次”，因为[]代表一个空数组。编辑：凯文的正确;对不起，我通常期望看到“Array.prototype.forEach”当需要非实例使用时 – Katana314 2015-04-02 18:40:02

您刚刚完全改变了整个问题的前提？ – adeneo 2015-04-02 18:51:24

的第一个片段，最后，做同样的事情，一个使用名为功能，另一个是匿名函数，它并没有真正的区别。

这

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

得到选择.two和遍历它们匹配的所有元素，并添加事件侦听到所有的人。

然而，这

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

只获取所述选择.one匹配所述第一元件，并增加了一个事件处理程序给它，匹配类中的任何其它元件没有得到。这是唯一真正的区别！

来源

2015-04-02 18:55:27 adeneo

谢谢，我欣赏你的答案！我的道歉对我的快速编辑，并导致你回答两次。 – darcher 2015-04-02 18:57:37

没问题，这只是有点混淆？ – adeneo 2015-04-02 19:03:47

我是当我最初问这个问题时，我确实可能会遇到'document.querySelectorAll（'。''）.addEventListener（'click'，function（event）{''）的错误。 '一rray.prototype.forEach'在该实例中是必需的，因为它获取HTMLCollection而不是一个元素。（我认为...希望，哈），开始与jQuery ...过渡到JavaScript ...因此我的困惑。 – darcher 2015-04-02 19:07:05

了解不同的事件监听器接近

回答

相关问题