事件处理程序和监听器有什么区别？

Question

事件处理程序和监听器有什么区别？

javascriptdom-events

35

JavaScript中事件处理程序和事件监听器有什么区别？它们都在事件出现时执行函数。我不太清楚何时使用事件处理程序和何时使用事件监听器。

- js-coder

6个回答

26

这没有区别；只是对同一个事物使用不同的术语。

为了实现事件处理，与DOM元素相关联的函数有不同的方法，这就是全部。差异在标准还不稳定时出现（或者因为实现者有点难以理解），但最终机制本质上是相同的。

如果您对要使用的事件处理程序注册方式感到困惑，可以：

阅读更多有关该主题的内容并选择一种方法使用，可能还需要根据浏览器进行选择
选择受欢迎的JavaScript框架并使用其附加处理程序的机制

- Pointy

谢谢你的回答。所以，当这两者之间没有区别时，我会使用事件处理程序，因为它具有浏览器支持。（我需要两个监听器，但只有一个处理程序）。 - js-coder

1

但是... "listener" 和 "handler" 没有区别，因此你拥有的是三个监听器、或三个处理器，或任何组合。实际上混合使用不同的方式来附加处理程序可能并不是一个好习惯。 - Pointy

嗯，我不会混淆它们。我只是想说我只需要一个处理程序而不是两个监听器（一个监听器用于NS事件模型，另一个用于MS事件模型）。 - js-coder

“listeners”和“handlers”的性能和内存效率有区别吗？ - karthikaruna

@karthikaruna 阅读答案的第一句话：没有区别。这两个词是完全相同的两个不同单词。 - Pointy

22

这个网站（有趣的是其中一个评论循环引用了这里），它与在这里回答“它们是相同的”的人不同，其中粘贴了一个答案：

一个区别是，如果您为同一个按钮单击添加两个事件处理程序，则第二个事件处理程序将覆盖第一个，并且仅触发该事件。例如：

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.

- killjoy

5

这应该是被接受的答案。确实存在区别。 - Papooch

到目前为止，我看到的关于这个问题的最好、最简明的解释来自MDN："事件处理程序有时被称为事件监听器 - 就我们的目的而言，它们几乎可以互换，尽管严格来说，它们是一起工作的。监听器会监听事件发生的情况，而处理程序是在事件发生后响应它的代码。" - thdoan

3

我觉得这份解释非常实用：

事件处理程序由一个“事件监听器”和一个“回调函数”组成。事件监听器指定要检测的事件类型，当事件发生时，回调函数执行。所有这些东西一起就是事件处理程序。

- Marcellvs

3

它们都用于在事件发生时关联一个函数。如果使用事件监听器，您可以在指定的事件中侦听多次（重复），例如，在独立的事件监听器中侦听两个单独的“click”事件，但是当使用处理程序时，这是不可能的，因为处理程序是您dom对象的属性，如果在同一事件处理程序中多次分配一个函数，例如，当将tow处理程序设置为onClick事件的a元素时，最后一个事件处理程序分配会起作用。

myElement= document.querySelector('#btn');

myElement.onClick = function(){
alert('first event handler');
}

myElement.onClick = function(){
alert('second event handler');
}

// result : occur last handler >> alert('second event handler'); 


but if using the event listeners you can listen to how many times listen to the same 
event.

myElement.addEventListener('click',()=>{

alert('first listener')

})

myElement.addEventListener('click',()=>{

alert('second listener')

})


/* result : occur both listeners - alert('firstlistener') >> and next >> alert('second 
listener'); */

- saman

1

没有太大的区别。我们可以说它们几乎是相同的东西，除了三个微小的不同之处：

您只能使用事件处理程序一次。如果您将处理程序多次用于一个元素，则最后一个处理程序将覆盖所有先前的处理程序。另一方面，如果您多次使用事件侦听器，则不会出现这样的情况。您可以使用许多事件侦听器，而不仅仅是一个。
对于某些事件，处理程序仅适用于addEventListener。例如DOMContentLoaded事件，该事件在文档加载和DOM构建时触发。
使用事件侦听器时，您可以通过在对象或类上使用handleEvent而不是函数传递它们。除了这些微小的事情外，我认为不存在任何区别。

有关更多信息，请参见

https://javascript.info/introduction-browser-events#object-handlers-handleevent

- Mohammad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Baker · Accepted Answer

处理程序和监听器是同一个东西 - 只是用于处理事件的函数的同义词。 "Handler" 可能是更被接受的术语，对我来说在语义上肯定更正确。术语 "listener" 源自用于将事件添加到元素的代码：

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

然而，您可以非常挑剔地将这两个术语分开解释。如果您有兴趣，"handler" 可以是处理添加 "listener" 时将要处理事件的函数的术语，因此一个可以拥有多个利用单个 "handler" 的 "listeners"。请考虑：

// 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();

所以在上面的代码中，我有两个“处理程序”（someFunction 和一个匿名函数）和三个“监听器”。

再次强调，这只是语义问题 - 在实际应用中，“监听器”和“处理程序”这两个术语通常可以互换使用。如果需要区分，那么一个监听器是订阅事件的操作，会触发对一个处理程序（即一个函数）的调用。

如清泥般清晰明了，是吗？