Key Concepts

Review core concepts you need to learn to master this subject

.addEventListener()

eventTarget.addEventListener("event", eventHandlerFunction);

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:

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](https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/web-dev-interactive-webs…
  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