← Previous Next →

Common DOM Events

common dom events
common dom events

DOM events are actions or occurrences that happen in the browser, which JavaScript can respond to. They enable interactivity on web pages by allowing scripts to react to user actions or browser changes.

💡 What Are DOM Events?

Events represent user interactions like clicks, typing, or page loading, and system occurrences such as timers or network responses.

Here are some of the most common DOM events you will use frequently:

Common DOM Events and Their Uses
EventDescription
clickTriggered when an element is clicked.
mouseoverOccurs when the mouse pointer moves over an element.
mouseoutOccurs when the mouse pointer leaves an element.
keydownFires when a key is pressed down.
keyupFires when a key is released.
inputOccurs when the value of an input element changes.
submitTriggered when a form is submitted.
loadFires when the whole page or an image finishes loading.
resizeOccurs when the browser window is resized.
scrollFires when the user scrolls the page or an element.

These events are attached to DOM elements using addEventListener, which allows you to specify the event type and the function to run when it occurs.

📌 Deep Dive: Adding a Click Event Listener

JAVASCRIPT
const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

Note: Event listeners can be added to any element, and multiple listeners for different events can coexist on the same element.

💡 Event Object

Event handlers receive an event object containing details like the event type, target element, and mouse coordinates. This allows more precise control within the handler.

📌 Deep Dive: Using the Event Object

JAVASCRIPT
document.addEventListener('click', event => {
  console.log('Clicked element:', event.target.tagName);
  console.log('Mouse X:', event.clientX, 'Mouse Y:', event.clientY);
});
Output
Clicked element: BUTTON (or other tag)
Mouse X: 150 Mouse Y: 300

⚠️ Avoid Inline Event Handlers

Do not use HTML attributes like onclick for event handling. Instead, use addEventListener to separate HTML and JavaScript cleanly and enable multiple listeners.

Other common events to explore as you build interactive pages:

  • change — when an input or select element's value changes and loses focus.
  • focus and blur — when an element gains or loses keyboard focus.
  • dblclick — when an element is double-clicked.

💡 Event Propagation

Events propagate through three phases: capturing, target, and bubbling. By default, listeners react during bubbling phase, which means events bubble up from the target element to ancestors.

Understanding common DOM events and how to listen to them is essential for creating responsive and dynamic user experiences.

← Previous Next →