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

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 2

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