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

Question

В чем разница между обработчиками событий и прослушивателями событий в JavaScript? Они оба выполняют функцию при появлении события. Я действительно не понимаю, когда использовать обработчики событий, а когда использовать прослушиватели событий.

Answer 1

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

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

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

// 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 «слушателя».

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

Ясно, как грязь?

Answer 2

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

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

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

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

Answer 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.

Answer 4

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

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