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 个“监听器”。

同样，这都是语义 - 出于所有实际目的，术语监听器和处理程序可以互换使用。如果需要进行区分，那么监听器是对事件的订阅，该事件将触发对处理程序(这是一个函数)的调用.

清澈如泥？