Key Concepts

Review core concepts you need to learn to master this subject

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
    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. 2
    After a specific event fires on a specific element in the [document object model](…
  3. 3
    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…
  4. 4
    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 …
  5. 5
    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…
  6. 6
    JavaScript stores events as Event objects with their related data and functionalities as properties and methods. When an event is triggered…
  7. 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. 8
    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 …
  9. 9
    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…
  10. 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

Pro Logo

How you'll master it

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

Pro Logo