Понимание различных прослушиватель событий приближается

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 и добавляет обработчик событий к нему, любые другие элементы, которые согласовывают этот класс не получил. Это единственное реальное различие!