What's the difference between event handlers & listener?

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?

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

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.