DOM Events

What Are DOM Events?

DOM events are actions or occurrences that happen in the browser, which the web page can respond to. Examples include:

• Clicking a button
• Typing in an input field
• Moving the mouse
• Submitting a form

These events allow developers to create interactive web pages by responding to user actions with JavaScript.

Understanding the DOM and Events

The Document Object Model (DOM) represents the structure of your webpage. JavaScript can “listen” for events on any element in the DOM and react to them using event listeners.

Basic Syntax:

javascriptCopyEditelement.addEventListener("event", function);

• element: The DOM element to watch (e.g., a button).
• "event": The type of event (e.g., "click").
• function: The code to run when the event happens.

Common DOM Events

Example 1: Click Event

HTML

htmlCopyEdit<button id="myButton">Click Me</button>
<p id="output"></p>

JavaScript

javascriptCopyEditdocument.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("output").textContent = "Button was clicked!";
});

What Happens:

When the button is clicked, the event listener triggers a function that changes the text of the paragraph.

Example 2: Mouseover and Mouseout

HTML

htmlCopyEdit<div id="hoverBox" style="width:200px; height:100px; background-color:lightblue;">Hover over me!</div>

JavaScript

javascriptCopyEditconst box = document.getElementById("hoverBox");

box.addEventListener("mouseover", function() {
  box.style.backgroundColor = "orange";
});

box.addEventListener("mouseout", function() {
  box.style.backgroundColor = "lightblue";
});

Explanation:

• mouseover: Changes the background to orange when the mouse enters.
• mouseout: Changes it back to light blue when the mouse leaves.

Example 3: Keydown Event

HTML

htmlCopyEdit<input type="text" id="nameInput" placeholder="Type something">
<p id="keyOutput"></p>

JavaScript

javascriptCopyEditdocument.getElementById("nameInput").addEventListener("keydown", function(event) {
  document.getElementById("keyOutput").textContent = "You pressed: " + event.key;
});

Explanation:

This example shows which key the user presses in real time.

Example 4: Form Submit Event

HTML

htmlCopyEdit<form id="myForm">
  <input type="text" id="username" placeholder="Enter username">
  <button type="submit">Submit</button>
</form>
<p id="formMessage"></p>

JavaScript

javascriptCopyEditdocument.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // Prevents page reload
  const username = document.getElementById("username").value;
  document.getElementById("formMessage").textContent = "Hello, " + username + "!";
});

Key Point:

event.preventDefault() stops the form from submitting in the traditional way (which reloads the page).

Event Objects

When an event occurs, an event object is automatically passed to the handler function. This object contains details like:

• event.type – the event type
• event.target – the element that triggered the event
• event.key – the key pressed (for keyboard events)

You can use this object to make more advanced interactions.

Conclusion

DOM events are essential for creating interactive websites. With JavaScript and the addEventListener() method, you can respond to clicks, typing, hovering, and more.

What You’ve Learned:

• How to use addEventListener()
• Common DOM events like click, mouseover, and keydown
• How to handle form submission without reloading
• How to access event details using the event object

As you continue learning, try experimenting with events like focus, blur, dblclick, and even mobile touch events like touchstart.