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.