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.

• decoder: read this too stackoverflow.com/questions/6929528/…

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

• screenm0nkey: @ChaosPandion - Doesn't really help me there as you're using a Java code example and my question was in relation to JavaScript terminology but thanks for taking the time to respond.
• ChaosPandion: @Nick - This is for JavaScript. The DOM documentation simply describes the interface in generic terms.
• screenm0nkey: @ChaosPandion - Doh! I'm a bit thick so you'll have to forgive me.
• Tim Down: Why would an "event handler" be asynchronous?
• Tim Down: Good point about being able to pass an object containing a handleEvent method into addEventListener: I'd completely forgotten about that.

Answer 2

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.

• screenm0nkey: I have always used them interchangeably but I reading an article on event delegation where a table was capturing all click events that occurred on it and they referred to the table as the handler, which then called the event listener.
• Tim Down: OK. I think it's an unusual use. Have you got a URL for that article?
• screenm0nkey: No. I know it's not very helpful but I can't find where i read it as it was a while back. I makes in a TODO list of which one was to ask this question.
• ChaosPandion: What the spec is saying is that attributes such as onload="func();", which is executable code that will be invoked for the onload event occurs, is equivalent to document.getElementById("id").addEventListener("onload", { handleEvent: function(evt) { func(); } }, false);
• Tim Down: OK, that bit of the spec does seem to be talking about attributes in particular, so perhaps that doesn't really clarify much about event handlers. An EventListener is still specified as being just a function object in ECMAScript though, not an object with a handleEvent method.