addEventListener and Event Object
Attach event listeners, receive the Event object, use preventDefault and stopPropagation, and understand event bubbling.
What Are Events?
Events are signals fired by the browser when something happens: a user clicks, presses a key, moves the mouse, the page loads, a network request completes. JavaScript reacts to events by attaching event listeners.
addEventListener Syntax
element.addEventListener(type, handler) attaches a function to run when the event fires. The handler receives an Event object with details about what happened.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});All lessons in this course
- querySelector and querySelectorAll
- addEventListener and Event Object
- Changing Content: textContent innerHTML classList
- Creating and Appending Elements