瞭解不同的事件監聽器接近

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

瞭解不同的事件監聽器接近

回答

相關問題