9

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.

ChaosPandion
  • 77,506
  • 18
  • 119
  • 157
screenm0nkey
  • 18,405
  • 17
  • 57
  • 75
  • read this too http://stackoverflow.com/questions/6929528/javascript-whats-the-difference-between-event-handlers-listener – decoder Dec 29 '12 at 19:33

2 Answers2

7

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

ChaosPandion
  • 77,506
  • 18
  • 119
  • 157
  • @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. – screenm0nkey Aug 02 '10 at 14:03
  • @Nick - This is for JavaScript. The DOM documentation simply describes the interface in generic terms. – ChaosPandion Aug 02 '10 at 14:06
  • @ChaosPandion - Doh! I'm a bit thick so you'll have to forgive me. – screenm0nkey Aug 02 '10 at 14:08
  • 1
    Why would an "event handler" be asynchronous? – Tim Down Aug 02 '10 at 14:11
  • Good point about being able to pass an object containing a `handleEvent` method into `addEventListener`: I'd completely forgotten about that. – Tim Down Aug 02 '10 at 14:13
  • @Nick - No Problem. @Tim - It is kind of like giving out your phone number. `I don't want to have to wait around for this to occur so when it does simply call me.` – ChaosPandion Aug 02 '10 at 14:22
  • Sorry, I wasn't clear. I'm aware of what asynchronous means. My question was why you made that distinction on the term "Event Handler" and not "Event Listener". – Tim Down Aug 02 '10 at 14:41
  • @ChaosPandion - So all function objects implement the EventListener interface? I didn't even know there was such a thing in JavaScript. I still don't know what you mean by 'Event Handler: An asynchronous callback that is invoked when an event is raised'. Could you possibly explain that in layman's terms. I understand now that an event listener is any object which implements the EventListener interface. – screenm0nkey Aug 02 '10 at 14:42
  • Nick: no, function objects don't implement the `EventListener` interface, in the sense that they don't have a `handleEvent` method (actually, JavaScript doesn't have formal interfaces). The key is that the `addEventListener` method of DOM Nodes accepts either a function object or an object with a `handleEvent` method. – Tim Down Aug 02 '10 at 14:50
  • @Tim and Chaos - Thanks guys. It's slowly making sense. – screenm0nkey Aug 02 '10 at 15:06
  • @Nick - No problem, eventually it will just click, but until then you simply have to get plenty of rest and run a few experiments to see how everything works. – ChaosPandion Aug 02 '10 at 15:11
  • Chaos: "So it looks like function objects implicitly implement EventListener for ease of use." - where do you get that from? The ECMAScript binding section of the DOM Events spec specifies that the `listener` parameter should simply be a function object. From http://www.w3.org/TR/DOM-Level-2-Events/ecma-script-binding.html: *"Object EventListener. This is an ECMAScript function reference. This method has no return value. The parameter is a Event object."* The fact that `someElement.addEventListener("click", { handleEvent: function() { alert("Click"); } }, false);` works could be non-standard. – Tim Down Aug 02 '10 at 15:16
  • Also, I'm not clear on the distinction you're making between an event handler and an event listener. The mailbox analogy is odd: you can ignore mail in your mailbox for as long as you like, whereas an event handler/listener is immediately called into action when the event occurs. The mailbox analogy seems more akin to a polling-based system to me: the mailman puts mail in the mailbox, while you go and have a look every now and then to check for new mail. – Tim Down Aug 02 '10 at 15:21
  • @Tim: I agree that it is non-standard but at some point the engineers working on DOM events for Firefox said *"Hey, do we really want people to have to define objects to the interface every single time?"*. So instead they probably did something like this: `if (typeof obj === "function") obj = { handleEvent: obj };` – ChaosPandion Aug 02 '10 at 15:22
  • @Tim - Hmm, I wonder if *"Asking your spouse to wait for the mail and check for the rebate check."* is more appropriate. – ChaosPandion Aug 02 '10 at 15:25
  • That's just faster polling :) – Tim Down Aug 02 '10 at 15:59
  • Event handlers are not asynchronous, though. o_O – James M. Greene Jan 02 '14 at 17:51
3

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.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 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. – screenm0nkey Aug 02 '10 at 14:07
  • OK. I think it's an unusual use. Have you got a URL for that article? – Tim Down Aug 02 '10 at 14:09
  • 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. – screenm0nkey Aug 02 '10 at 14:14
  • 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);` – ChaosPandion Aug 02 '10 at 15:57
  • 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. – Tim Down Aug 02 '10 at 16:37