DOM Events with JavaScript

Key Concepts

Review core concepts you need to learn to master this subject

javascript event

Event handler

JS Event Handlers

Event object

.addEventListener()

.removeEventHandler()

Mouse events

Keyboard events

javascript event

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

On a webpage, a trigger such as a user interaction or browser manipulation can cause a client-side JavaScript event to be created. Events can be used to maniuplate the DOM by executing a JavaScript function.

Events can include anything from a click to hovering a mouse over an element to a webpage loading or being refreshed. Events are defined as a part of the JavaScript API built into the web browser.

Event handler

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

When an event fires in JavaScript (such as a keystroke or mouse movement), an event handler runs in response. Each event handler is registered to an element, connecting the handler to both an element and a type of event (keystroke, eg.). A method called an event listener “listens” for an event to occur, specifies what should happen as a response, and calls the event handler.

JS Event Handlers

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

The goal of JavaScript is to make a page dynamic, which frequently means responding to certain events (for example, button clicks, user scrolls, etc). DOM elements can have functions hook onto events. The functions are called event handlers and the DOM element is known as an event target.

The example code block shows how to register a function as an event handler. The property name for event handlers starts with ‘on’ with the event appended afterwards. Examples: onload, onclick, onfocus, onscroll.

Event object

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

Event handler functions are passed an argument called an event object, which holds information about the event that was fired.

Event objects store information about the event target, the event type, and associated listeners in properties and methods. For example, if we wanted to know which key was pressed, the event object would store that information.

.addEventListener()

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

The .addEventListener() method attaches an event handler to a specific event on an event target. The advantage of this is that you can add many events to the event target without overwriting existing events. Two arguments are passed to this method: an event name as a string, and the event handler function. Here is the syntax:

.removeEventHandler()

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

We can tell our code to listen for an event to fire using the .addEventListener() method. To tell the code to stop listening for that event to fire, we can use the .removeEventListener() method. This method takes the same two arguments that were passed to .addEventListener(), the event name as a string and the event handler function. See their similarities in syntax:

Mouse events

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

A mouse event fires when a user interacts with the mouse, either by clicking or moving the mouse device.

click events are fired when the user presses and releases a mouse button on an element.
mouseout events are fired when the mouse leaves an element.
mouseover events are fired when the mouse enters an element’s content.
mousedown events are fired when the user presses a mouse button.
mouseup events are fired when the user releases the mouse button.

Keyboard events

// An event is triggered when a user clicks on the #button element,
// which then sets the #button element's background-color to blue. 
$('#button').on('click', event => {
  $(event.currentTarget).css('background-color', 'blue');  
});

Keyboard events describe a user interaction with the keyboard. Each event describes a separate interaction with a key on the keyboard by the user, which are then stored with the .key property.

keydown events are fired when the key is first pressed.
keyup events are fired when the key is released.
keypress events are fired when the user presses a key that produces a character value (aka is not a modifier key such as CapsLock).

DOM Events with JavaScript

Lesson 1 of 1

1
When you refresh your email inbox, double tap on a post, or scroll through a newsfeed — something cool happens in your browser. These actions are known as events! Events on the web are us…
2
After a specific event fires on a specific element in the document object model (or DOM), an event handler function can be created to run as a response. In this lesson, we will learn about _even…
3
You’re doing great! Now it’s time to dive into using event handler functions to create interactivity. JavaScript interprets registered events as event objects with properties and methods. When y…
4
It’s best practice to create named event handler functions, instead of anonymous functions. Your code will remain organized and reusable this way, even if your code gets complex. Check out the synt…
5
The .removeEventListener() method is used reverse the .addEventListener() method. This method stops the code from “listening” for an event to fire when it no longer needs to. .removeEventListener a…
6
JavaScript stores events as event objects with their related data and functionality as properties and methods. There are pre-determined properties associated with event objects. You can call thes…
7
Beyond the click event, there are all types of DOM events that can fire in a browser! It’s important to know most events in the DOM take place without being noticed because there are no event han…
8
When you click down or move the mouse device mouse events fire. Outside of the click event, there are other events that can be fired when using a mouse. The mousedown event is fired when the use…
9
Another popular type of event is the keyboard event! keyboard events are triggered by user interaction with keyboard keys in the browser. The keydown event is fired while a user presses a key do…
10
Congrats, you completed the lesson! Now you’ve learned about JavaScript events and you can leverage these events on the DOM to create interactivity with event handlers. Let’s review what you’ve l…

What you'll create

Portfolio projects that showcase your new skills

Piano Keys
It’s time to build fluency in your coding skills. In this next Pro Project, we’re going to practice building interactivity with JavaScript. Why? You will have the opportunity to build an interactive web page with events like you would in the real-world. What’s next? Create an interactive piano player. You got this!

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

DOM Events
What is an event on the web?

javascript event

Event handler

JS Event Handlers

Event object

.addEventListener()

.removeEventHandler()

Mouse events

Keyboard events

Piano Keys

DOM Events