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

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