Anne van Kesteren

On Events

As with tags and elements years ago, developers often confuse event related terminology. Probably in part because events are somewhat complex.

The common mistake is naming an event handler an event. onclick is an event handler, click is its corresponding event. Saying “onscroll event” (or more generally oneventtype event) is wrong.

Technically, click is an event type and only a small (but significant) part of the event object. Events are objects that can be listened for using event listeners. An example of an event object is MouseEvent. These objects carry information about the event. All events have a type (click, message, DOMContentLoaded, …), that in practice has a strong correlation to the type of event object (MouseEvent, MessageEvent, …), but is orthogonal in theory (most notably when it comes to synthetic events). An event listener is registered for an event type (not its event object type). Some event types have special event listeners, called event handlers. An example of an event handler is onclick. Event listeners and event handlers differ in that event listeners work for any event type, work for the capturing event phase, and can register more than one callback for a given event type. Having said that, lets start with simply distinguishing event handlers and event types.