Какая разница между обработчиками событий и слушателем?

Ответ 1

Нет никакой разницы; это просто другая терминология для одного и того же.

Существуют различные способы связывания функций с элементами DOM для обработки событий, что и все. Различия возникли снова, когда стандарты были в потоке (или просто потому, что разработчики были hornery или трудными), но в конечном итоге механизмы по существу одинаковы.

Если вы смущены тем, какую регистрацию обработчика событий использовать, вы можете:

• Узнайте больше о теме и выберите подход к использованию, возможно, в браузере по-браузеру;
• Выберите один из популярных фреймворков JavaScript и используйте его механизм для прикрепления обработчиков.

Ответ 2

Обработчик и слушатель являются одними и теми же - просто синонимы для функции, которая будет обрабатывать событие. "Обработчик", вероятно, является более приемлемым термином и, безусловно, более семантически корректен для меня. Термин "слушатель" выводится из кода, используемого для добавления события к элементу:

element.addEventListener('click', function() { /* do stuff here*/ }, false);

Вы могли бы, однако, получить действительно nitpicky и разбить два на отдельные значения. Если вы так склонны, "обработчик" может быть термином для функции, которая будет обрабатывать событие при добавлении "слушателя", таким образом, у вас может быть несколько "слушателей", в которых используется один "обработчик". Рассмотрим:

// handler is synonymous with function 
function someFunction(e) {
  if (typeof e == 'undefined')
   alert('called as a function');
  else
   alert('called as a handler');
}


// use someFunction as a handler for a 
// click event on element1 -- add a "listener"
element.addEventListener('click', someFunction, false);
// use an anonymous function as a handler for a 
// click event on element1 -- add another "listener"
element.addEventListener('click', function () { alert('anonymoose'); }, false);


// use someFunction as a handler for a 
// click event on element2 -- add a "listener"
element2.addEventListener('click', someFunction, false);

// call someFunction right now
someFunction();

Итак, в приведенном выше коде у меня есть 2 "обработчика" (someFunction и анонимная функция) и 3 "прослушивателя".

Опять же, это все семантика - для всех практических целей термины слушатель и обработчик используются взаимозаменяемо. Если необходимо провести различие, слушатель является подпиской на событие, которое вызовет вызов обработчику (который является функцией).

Удалить как грязь?

Ответ 3

Этот сайт(на который, как ни странно, есть циклическое упоминание здесь одним из комментариев) утверждает иначе, что люди ответили здесь (заявляя, что они одинаковы); вставить один из ответов:

Одно из отличий состоит в том, что если вы добавите два обработчика событий для одного и того же нажатия кнопки, второй обработчик события перезапишет первое, и сработает только это событие. например:

document.querySelector('.btn').onclick = function() {
  console.log('Hello ');
};

document.querySelector('.btn').onclick = function() {
  console.log('World!');
};

// This logs "World!" out to the console.

Но если вместо этого вы используете addEventListener, то оба триггера запустятся.

document.querySelector('.btn').addEventListener('click', function() {
  console.log('Hello ');
});

document.querySelector('.btn').addEventListener('click', function() {
  console.log('World!');
});

// This logs "Hello" and "World!" out to the console.

Ответ 4

Я нахожу это объяснение особенно практическим:

Обработчики событий состоят из прослушивателя событий и функции обратного вызова. Прослушиватель событий указывает тип события, которое будет обнаружено. Функция обратного вызова выполняется, когда происходит событие. Все вместе - это обработчик событий.