DOM Events with JavaScript
Learn to create webpage interactivity by leveraging JavaScript events in the browser.
Start
Key Concepts
Review core concepts you need to learn to master this subject
.addEventListener()
.removeEventHandler()
Event handler
Event object
Keyboard events
javascript event
JS Event Handlers
Mouse events
.addEventListener()
.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
- 1When 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…
- 2After 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…
- 3You’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…
- 4We 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 …
- 5The .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…
- 6JavaScript stores events as Event objects with their related data and functionalities as properties and methods. When an event is triggered…
- 7Beyond 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…
- 8When you use a mouse device on a website, mouse events fire. You’ve seen the click and wheel events, but, there are even mouse events to explore! The mousedown event is fired when the user press…
- 9Other 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
DOM Events with JavaScript
Start