Event Listeners & Event Object
Events are actions that happen on a page - clicks, key presses, form submissions, scrolling. addEventListener attaches a function that runs when the event occurs. The event object provides details about what happened.
Events Essentials
- addEventListener(event, callback) - Attach event: button.addEventListener('click', handleClick)
- removeEventListener - Detach: button.removeEventListener('click', handleClick). Function must be named
- Event object - Passed automatically to callback: function(event) { }. Contains useful info
- event.target - The element that triggered the event (what was clicked)
- event.currentTarget - The element the listener is attached to
- event.preventDefault() - Prevent default behavior (form submission, link navigation)
- Common events - click, submit, keydown, keyup, input, change, scroll, load, DOMContentLoaded
Events Code
// addEventListener
const button = document.querySelector("#myBtn");
function handleClick(event) {
console.log("Clicked!", event.target);
console.log("Button text:", event.target.textContent);
console.log("Mouse position:", event.clientX, event.clientY);
}
// button.addEventListener("click", handleClick);
// Prevent default behavior
// const form = document.querySelector("form");
// form.addEventListener("submit", function(event) {
// event.preventDefault(); // stop form from submitting
// console.log("Form data processed with JavaScript!");
// });
// Prevent link navigation
// const link = document.querySelector("a");
// link.addEventListener("click", function(event) {
// event.preventDefault();
// console.log("Link click intercepted!");
// });
// Remove event listener (must use named function)
// button.removeEventListener("click", handleClick);
// Once option - runs only once
// button.addEventListener("click", () => {
// console.log("This only runs once!");
// }, { once: true });
// Multiple events on same element
// button.addEventListener("mouseenter", () => console.log("Hover!"));
// button.addEventListener("mouseleave", () => console.log("Left!"));
console.log("Event listener patterns demonstrated");Tip
Tip
Use the event object parameter (e) to get information about the event: e.target (element clicked), e.key (key pressed), e.clientX/Y (mouse position). Always name it 'e' or 'event' for consistency.
Fewer listeners = better perf. Works for dynamic elements.
Common Mistake
Warning
Adding event listeners inside loops without considering closures. Each iteration should capture its own variable. Use let (not var) in the loop, or use event delegation instead of individual listeners.
Practice Task
Note
Event handling: (1) Add a click listener that logs the clicked element's text. (2) Add a keydown listener that shows the pressed key. (3) Use preventDefault on a form to stop page reload on submit.
Quick Quiz
Key Takeaways
- Events are actions that happen on a page - clicks, key presses, form submissions, scrolling.
- addEventListener(event, callback) - Attach event: button.addEventListener('click', handleClick)
- removeEventListener - Detach: button.removeEventListener('click', handleClick). Function must be named
- Event object - Passed automatically to callback: function(event) { }. Contains useful info