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元素相关联，这就是全部。当标准不断变化时（或者仅仅因为实施者是恐怖的或困难的），差异就会出现，但最终机制基本相同。

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

Read more about the topic并选择使用方法，可能是逐个浏览器;
选择一个流行的JavaScript框架并使用其附加处理程序的机制

Answer 3

This site，（有趣的是，其中有一条评论周期性地引用了这里的注释）指出了人们在这里回答的内容（表明它们是相同的）；粘贴答案之一：

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

all article pages

但是，如果您改用addEventListener，则两个触发器都将运行。

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

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

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

Answer 4

它们并不相同（也许在某些情况下-是）。将事件处理程序视为具有不同名称（“ click”，“ dblclick”，“ drag”，“ canplay”等）的预定义函数，它们是不同对象（DOM对象，例如“ btn”，“ window”等）的方法。）。您可以通过相应的动作来调用它们（“ drag（）;”-用鼠标拖动某些元素时将相等）。现在想象一下，这些函数（方法）是空的（花括号中没有任何内容），它们没有监听任何事件。当我们“注册”（用花括号写一些代码块）此事件处理程序的某些功能时，它们现在也是事件侦听器。通过直接在括号中定义函数，使用事件处理程序或引用另一个已经定义的函数，可以进行“注册”。

Answer 5

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

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

有关更多信息，请参见

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

Answer 6

我发现这种解释特别动手：

事件处理程序由事件侦听器和回调函数组成。事件侦听器指定将要检测的事件的类型。事件发生时执行回调函数。 一切都是事件处理程序。

Answer 7

它们中的

都用于在事件发生时关联功能，如果使用事件侦听器，则可以在指定事件（重复）中侦听多次，例如，将两个“ click”事件侦听到独立的事件侦听器中，但是当使用处理程序是不可能的，因为处理程序是dom对象的属性，并且如果在同一事件处理程序中多次分配一个函数，例如，当为onClick事件设置为元素拖曳处理程序时，最后一个事件处理程序分配就是有效的。

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'); */

JavaScript - 事件处理程序和事件之间的区别是什么？听众？

7 个答案: