What's the difference between event handlers & listener?

Question

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.

Answer 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 ornery or difficult) but ultimately the mechanisms are essentially the same.

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

Answer 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".

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?

Answer 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.

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.

Answer 4

I find this explanation particularly hands-on:

Event handlers are comprised of an event listener and 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.

Answer 5

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.

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

Answer 6

there's no big difference. we can say they are almost the same things except for three subtle things that are:

1. you can use an event handler once. if you use a handler to an element twice or more, then the last handler will overwrite all those previous handlers. on the other hand, if you use event listeners more then once, there won't be such a thing like this. you can use many event listeners, but not just one.
2. For some events, handlers only work with addEventListener. like the DOMContentLoaded event, which triggers when the document is loaded and DOM is built.
3. whit using event listeners, you can pass an object or class by using handleEvent on them instead of a function to the handler. except for these subtle things, I don't think it exists any difference.

For more information see

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