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

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中的事件处理程序和事件侦听器之间有什么区别?它们都在事件出现时执行一个功能。我真的不知道何时使用事件处理程序以及何时使用事件侦听器。

3 个解决方案

#1

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 topic and 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框架并使用其机制来附加处理程序

#2

A handler and a listener are one in the same - just synonyms for the function that will handle an 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 listener is a subscription to an event that will trigger a call to a handler (which is a function).

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

Clear as mud?

像泥一样清楚?

#3

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.

#1