JavaScript Event Terminology

Question

What's the difference between an event handler and an event listener?

Up until recently I considered them to be different names for the same thing: a function that's called when an event occurs. But I read something recently that referred to the event handler as the DOM element to which the event listener was bound, which would make sense.

Answer 1

In the context of JavaScript, I tend to use them interchangeably. I think the majority of JavaScript developers would consider them to mean the same thing: a function that is called when a particular event occurs. I and I think others would be confused if you referred to the event's target DOM node as the "event handler".

EDIT

"Event listener" has a particular meaning within the DOM Level 2 Events specification. The listener parameter of the addEventListener and removeEventListener methods of event targets (such as elements) is of type EventListener, which is specified as an interface containing a single handleEvent method. However, JavaScript having no concept of interfaces, in the ECMAScript Binding section, it specifies:

Object EventListener This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.

So in JavaScript, it seems clear an event listener is a function that is called when an event occurs.

"Event handlers" are also mentioned in the Scripts section of the HTML 4.01 specification, which is alluded to in the DOM Level 2 Events specification (emphasis mine):

1.3.2. Interaction with HTML 4.0 event listeners ... In order to achieve compatibility with HTML 4.0, implementors may view the setting of attributes which represent event handlers as the creation and registration of an EventListener on the EventTarget.

It seems clear from this that the two terms mean essentially the same thing in the JavaScript world.

Answer 2

Just to be perfectly clear, the language itself does not have the concept of events. These are part of the DOM.

Event Handler:
    An asynchronous callback that is invoked when an event is raised.
Event Listener: 
    An object that implements an interface and has events "pushed" to it.

In the context of DOM events the interface used is this:

interface EventListener {
  void handleEvent(in Event evt);
};

Then you register a listener like this:

target.addEventListener(type, listener, useCapture);

Here is the documentation from MDC:

listener:
The object that receives a notification when an event of the specified 
type occurs. This must be an object implementing the EventListener interface, 
or simply a JavaScript function.

So it looks like function objects implicitly implement EventListener for ease of use.

Analogies

Think of Event Handler as giving the mailman instructions.

I don't want to have to wait for you to stop by so I want you to give the package to my spouse so they can open it.

Think of Event Listener as waiting to see your doctor.

I will be listening for a notification that you are ready to see me. Until then I'll be reading a magazine.

At the end of the day though these are simply abstractions for

Hey, I want you to execute this code!

Resources

Event Handler

Observer Pattern