Javascript 事件处理程序和侦听器之间有什么区别？

What's the difference between event handlers & listener?

提问by js-coder

What is the difference between event handlers and event listeners in JavaScript? They both execute a function when the event appears. I don't really get when to use event handlers and when to use event listeners.

JavaScript 中的事件处理程序和事件侦听器有什么区别？当事件出现时，它们都执行一个函数。我真的不知道何时使用事件处理程序以及何时使用事件侦听器。

采纳答案by Pointy

There's no difference; it's just different terminology for the same thing.

没有区别；这只是同一件事的不同术语。

There are different ways of associating functions with DOM elements for the purpose of event handling, that's all. The differences emerged back when standards were in flux (or just because implementors were hornery or difficult) but ultimately the mechanisms are essentially the same.

为了事件处理的目的，有多种方法可以将函数与 DOM 元素相关联，仅此而已。当标准不断变化时（或者仅仅因为实施者是角质或困难的），差异又出现了，但最终机制基本上是相同的。

If you're confused about what sort of event handler registration to use, you can:

如果您对使用哪种事件处理程序注册感到困惑，您可以：

• Read more about the topicand choose an approach to use, perhaps on a browser-by-browser basis;
• Choose one of the popular JavaScript frameworks and use its mechanism for attaching handlers

• 阅读有关该主题的更多信息并选择一种使用方法，可能是在逐个浏览器的基础上；
• 选择一种流行的 JavaScript 框架并使用其附加处理程序的机制

回答by Chris Baker

A handler and a listener are one in the same - just synonyms for the function that will handlean event. "Handler" is probably the more accepted term, and is certainly more semantically correct to me. The term "listener" is derived from the code used to add an event to an element:

处理程序和侦听器是同一个——只是处理事件的函数的同义词。“处理程序”可能是更被接受的术语，对我来说在语义上肯定更正确。术语“侦听器”源自用于向元素添加事件的代码：

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

You could, however, get really nitpicky and break the two down into separate meanings. If you're so inclined, "handler" could be the term for the function that is going to handle an event when you add a "listener", thus one can have several "listeners" that utilize a single "handler". Consider:

但是，您可以变得非常挑剔并将两者分解为不同的含义。如果您如此倾向，“处理程序”可能是当您添加“侦听器”时将处理事件的函数的术语，因此可以有多个“侦听器”使用单个“处理程序”。考虑：

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

So in the above code, I have 2 "handlers" (someFunction and an anonymous function) and 3 "listeners".

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

Again, this is all semantics - for all practical purposes the terms listener and handler are used interchangeably. If a distinction need be made then a listeneris a subscription to an event that will trigger a call to a handler(which is a function).

同样，这就是全部语义 - 出于所有实际目的，术语侦听器和处理程序可互换使用。如果需要区分，那么侦听器是对事件的订阅，该事件将触发对处理程序（这是一个函数）的调用。

Clear as mud?

清如泥？

回答by killjoy

This site, (which funnily enough has a cyclical reference to here by one of the comments) states otherwise, to what people have answered here (stating they are same); pasting one of the answers:

这个网站，（有趣的是，其中一个评论循环引用了此处）另有说明，即人们在此处回答的内容（说明他们是相同的）；粘贴其中一个答案：

One difference is that if you add two event handlers for the same button click, the second event handler will overwrite the first and only that event will trigger. For example:

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

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

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

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

But if you use addEventListener instead, then both of the triggers will run.

但是，如果您改用 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.

回答by Marcellvs

I find this explanation particularly hands-on:

我发现这个解释特别实用：

Event handlers are comprised of an event listenerand a callback function. An event listener specifies the type of event that will be detected. The callback function executes when the event happens. Everything together is the event handler.

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

回答by saman

both of them used for associating a function when an event occurs, if using the event listener's you can listen more than once in A specified event (duplicate) for example listen to tow 'click' event into independent event listener's, but when using the handler it's impossible because handler is a property of your dom object and if Assign more than once a function in same event handler, for example, when set to the a element tow handler for onClick event, the last event handler assignment is work.

它们都用于在事件发生时关联函数，如果使用事件侦听器，您可以在指定的事件（重复）中多次侦听，例如将“单击”事件侦听为独立的事件侦听器，但是在使用处理程序时这是不可能的，因为处理程序是你的 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'); */