Prev Next

DOM Events

DOM events allow interaction between users and a webpage by capturing actions like clicks, keypresses, or mouse movements. JavaScript can listen for these events and execute specific actions in response.

Key Topics

Common Events

Common DOM events include click, mouseover, keyup, and submit. Each event can be listened to and acted upon dynamically.

document.getElementById("button").addEventListener("click", () => {
    console.log("Button clicked!");
});

Output

> Button clicked!

Explanation: The addEventListener method attaches a click event listener to the button, logging a message when clicked.

Event Handling

Event handling allows you to respond to user actions. Attach event listeners using methods like addEventListener or directly in HTML using attributes like onclick.

function handleClick() {
    alert("You clicked the button!");
}
document.getElementById("button").addEventListener("click", handleClick);

Output

(An alert box displays "You clicked the button!" when the button is clicked.)

Explanation: The handleClick function is called whenever the click event occurs on the button.

The Event Object

Event handlers receive an event object as a parameter, providing details about the event such as type, target element, and coordinates.

document.addEventListener("mousemove", (event) => {
    console.log(`Mouse at: (${event.clientX}, ${event.clientY})`);
});

Output

> Mouse at: (x, y)

Explanation: The event object provides details about the mouse position, which are logged dynamically.

JavaScript Usage in DOM

Below is a complete DOM example demonstrating event handling dynamically using JavaScript.

<!DOCTYPE html>
<html>
    <head>
        <title>DOM Events Example</title>
    </head>
    <body>
        <button id="button">Click Me</button>
        <script>
            document.getElementById("button").addEventListener("click", () => {
                alert("Button was clicked!");
            });
        </script>
    </body>
</html>

Key Takeaways

  • Common Events: Capture user actions like clicks, keypresses, and mouse movements.
  • Event Handling: Use addEventListener for better control and flexibility.
  • Event Object: Provides valuable information about the event, including target and coordinates.
  • Dynamic Interactivity: Events enable real-time interaction with webpage elements.
Prev Next