Events

Events are things that happen in the system you are programming, which the system tells you about so your code can react to them. For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box. In this article, we discuss some important concepts surrounding events, and look at the fundamentals of how they work in browsers.

Events are things that happen in the system you are programming, the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. Events are fired inside the browser window, and tend to be attached to a specific item that resides in it. This might be a single element, a set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur.

For example:

• The user selects, clicks, or hovers the cursor over a certain element.
• The user presses a key on the keyboard.
• The user resizes or closes the browser window.
• A web page finishes loading.
• A form is submitted.
• A video is played, paused, or ends.
• An error occurs.

To react to an event, you attach an event handler to it. This is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires. When such a block of code is defined to run in response to an event, we say we are registering an event handler. Note: Event handlers are sometimes called event listeners, they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that runs in response to it happening.

Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.

Event Bubbling

We've seen that a web page is composed of elements: headings, paragraphs of text, images, buttons, and so on, and that you can listen for events that happen to these elements. For example, you could add a listener to a button, and it will run when the user clicks the button.

We've also seen that these elements can be nested inside each other: for example, a <button> could be placed inside a <div> element. In this case we'd call the <div> element a parent element, and the <button> a child element.

You'll see that the parent fires a click event when the user clicks the button. This makes sense: the button is inside the <div>, so when you click the button you're also implicitly clicking the element it is inside.

What happens if we add event listeners to the button and the parent?

You'll see that both the div and the button fire a click event when the user clicks the button

How To Stop Bubbling

There may situations where you want to keep the event from bubbling. This can be done by calling the stopPropagation() function.

Event capture

An alternative form of event propagation is event capture. This is like event bubbling but the order is reversed: instead of the event firing first on the innermost element targeted, and then on successively less nested elements, the event fires first on the least nested element, and then on successively more nested elements, until the target is reached.

Event capture is disabled by default. To enable it you have to pass the capture option in addEventListener().

Why bother with both capturing and bubbling? In the bad old days, when browsers were much less cross-compatible than now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is what modern browsers implement.

By default almost all event handlers are registered in the bubbling phase, and this makes more sense most of the time.

Event Delegation

In the last section, we looked at a problem caused by event bubbling and how to fix it. Event bubbling isn't just annoying, though: it can be very useful. In particular, it enables event delegation. In this practice, when we want some code to run when the user interacts with any one of a large number of child elements, we set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually.

Let's go back to our first example, where we set the background color of the whole page when the user clicked a button. Suppose that instead, the page is divided into 16 tiles, and we want to set each tile to a random color when the user clicks that tile.

In this example, we're using event.target to get the element that was the target of the event (that is, the innermost element). If we wanted to access the element that handled this event (in this case the container) we could use event.currentTarget.

target and currentTarget

If you look closely at the examples we've introduced in this page, you'll see that we're using two different properties of the event object to access the element that was clicked. In Setting a listener on a parent element we're using event.currentTarget. However, in Event delegation, we're using event.target.

The difference is that target refers to the element on which the event was initially fired, while currentTarget refers to the element to which this event handler has been attached.

While target remains the same while an event bubbles up, currentTarget will be different for event handlers that are attached to different elements in the hierarchy.

We can see this if we slightly adapt the Bubbling example above. We're using the same HTML as before:

Common Event Types

There are a few events that are more common than others. The following is a list with descriptions of some of the more commonly used events.

Page Load Event

Any code that requires that all elements and scripts have been loaded prior to being invoked should be place within the contents of this event. This is the vanilla Javascript equivalent of jQuery's $(window).load(function() {});

Click Event

A click event most often applies to buttons, but it could be applied just about any HTML element that the user clicks on including images, div, span, or other form of input.

An element receives a click event when any of the following occurs:

• A pointing-device button (such as a mouse's primary button) is both pressed and released while the pointer is located inside the element.
• A touch gesture is performed on the element.
• Any user interaction that is equivalent to a click, such as pressing the Space key or Enter key while the element is focused. Note that this only applies to elements with a default key event handler, and therefore, excludes other elements that have been made focusable by setting the tabindex attribute.
• When a click event is programattically applied to an element.

If the button is pressed on one element and the pointer is moved outside the element before the button is released, the event is fired on the most specific ancestor element that contained both elements.

click fires after both the mousedown and mouseup events have fired, in that order.

The event is a device-independent event, meaning it can be activated by touch, keyboard, mouse, and any other mechanism provided by assistive technology.

Syntax

Programatically Initiating A Click Event

Change Event

The change event is fired for <input>, <select>, and <textarea> elements when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

• When a <input type="checkbox"> element is checked or unchecked (by clicking or using the keyboard);
• When a <input type="radio"> element is checked (but not when unchecked);
• When the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.);
• When the element loses focus after its value was changed: for elements where the user's interaction is typing rather than selection, such as a <textarea> or the text, search, url, tel, email, or password types of the <input> element.

Focus Event

Keyboard Event

KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard. The event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred.

KeyboardEvent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. When you need to handle text input, use the input event instead. Keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet.

The KeyboardEvent() constructor creates a new KeyboardEvent object.

Constants

The KeyboardEvent interface defines the following constants.

Keyboard Locations

The following constants identify which part of the keyboard the key event originates from.

They are accessed as KeyboardEvent.DOM_KEY_LOCATION_STANDARD and so forth.

Instance Properties

This interface also inherits properties of its parents, UIEvent and Event.
All of the following properties are read only.

Instance methods

This interface also inherits methods of its parents, UIEvent and Event.

KeyboardEvent.getModifierState()

Returns a boolean value indicating if a modifier key such as Alt, Shift, Ctrl, or Meta, was pressed when the event was created.

Events

The following events are based on the KeyboardEvent type. In the list below, each event links to the documentation for the Element handler for the event, which applies generally to all of the recipients, including Element, Document, and Window.

Sequence of Events

1. When the key is first pressed, the keydown event is sent.
2. If the key is not a modifier key, the keypress event is sent.
3. When the user releases the key, the keyup event is sent.

Special Cases

Some keys toggle the state of an indicator light; these include keys such as Caps Lock, Num Lock, and Scroll Lock. On Windows and Linux, these keys dispatch only the keydown and keyup events.

Keydown Event

The keydown event is fired when a key is pressed.

Unlike the deprecated keypress event, the keydown event is fired for all keys, regardless of whether they produce a character value.

The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events.

The event target of a key event is the currently focused element which is processing the keyboard activity. This includes: <input>, <textarea>, anything that is contentEditable, and anything else that can be interacted with the keyboard, such as <a>, <button>, and <summary>. If no suitable element is in focus, the event target will be the <body> or the root. The event bubbles. It can reach Document and Window.

The event target might change between different key events. For example, the keydown target for pressing the Tab key would be different from the keyup target, because the focus has changed.

Keyup Event

The keyup event is fired when a key is released.

Looking At Both Key Down and Key Up

Mouse Event

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

MouseEvent derives from UIEvent, which in turn derives from Event. Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.

Several more specific events are based on MouseEvent, including WheelEvent, DragEvent, and PointerEvent.

Event <--- UIEvent <--- MouseEvent

Constructor

Instance Properties

This interface also inherits properties of its parents, UIEvent and Event.

altKey Property

altKey

Click on the mouse in the shaded div below. Try with aly key pressed and without.

Mouse Button

Click on the mouse in the shaded div below. Try with right, left and middle mouse buttons if posible.

Mouse Position

Mouse Position