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 manipulate 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.

DOM Events with JavaScript
Lesson 1 of 1
  1. 1
    What is an Event?
    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…
    Start
  2. 2
    "Firing" Events
    After a specific event fires on a specific element in the [document object model](https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-webs…
    Start
  3. 3
    Event Handler Registration
    You’re doing great! Now it’s time to dive into using event handler functions to create interactivity. Using the .addEventListener() method, we can have a DOM element listen for a specific event an…
    Start
  4. 4
    Adding Event Handlers
    We looked at registering event handlers using the .addEventListener() method, but there is also another way! Event Handlers can also be registered by setting an .onevent property on a DOM element …
    Start
  5. 5
    Removing Event Handlers
    The .removeEventListener() method is used to reverse the .addEventListener() method. This method stops the event target from “listening” for an event to fire when it no longer needs to. .removeEven…
    Start
  6. 6
    Event Object Properties
    JavaScript stores events as Event objects with their related data and functionalities as properties and methods. When an event is triggered…
    Start
  7. 7
    Event Types
    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…
    Start
  8. 8
    Mouse Events
    When you use a mouse device on a website, mouse events fire. You’ve seen the click and wheel events, but, there are even more mouse events to explore! The mousedown event is fired when the user …
    Start
  9. 9
    Keyboard Events
    Other popular types of events are keyboard events! keyboard events are triggered by user interaction with keyboard keys in the browser. The keydown event is fired while a user presses a key down…
    Start
  10. 10
    Review
    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…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

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

Pro Logo