Lesson 5: DOM Events – Introduction to Event Handling

Learning Objectives

By the end of this lesson, learners will be able to:

• Understand what events are in the browser
• Recognize commonly used DOM event types
• Use addEventListener() to attach events to elements
• Write event handler functions
• Build interactive behavior (e.g. click a button to change text)

What Is an Event?

An event is something that happens in the browser that JavaScript can respond to.

Examples of events:

• The user clicks a button
• The user types in a field
• The mouse moves over an element
• A form is submitted
• The page loads

JavaScript listens for these events and allows you to run specific code in response — this is called event handling.

Common DOM Events

Using addEventListener()

Syntax:

element.addEventListener("event", function);

This tells the browser:
“When this event happens on this element, run this function.”

Example 1: Click Event

HTML:

<button id="greet-btn">Click Me!</button>
<p id="message">Hello!</p>

JavaScript:

let button = document.getElementById("greet-btn");
let message = document.getElementById("message");

button.addEventListener("click", function () {
  message.textContent = "You clicked the button!";
});

What happens:

• The browser waits for a click on the button.
• When it happens, it runs the function and changes the paragraph’s text.

What Is an Event Handler?

An event handler is the function that runs when the event occurs.

In the previous example:

function () {
  message.textContent = "You clicked the button!";
}

… is the event handler function for the click event.

You can also write named functions:

function showMessage() {
  message.textContent = "You clicked!";
}

button.addEventListener("click", showMessage);

✅ Best practice: Use named functions when possible to keep code clean and reusable.

Example 2: Mouseover and Input Events

HTML:

<h3 id="hover-me">Hover over me</h3>
<input id="name-input" placeholder="Type your name" />
<p id="output"></p>

JavaScript:

let heading = document.getElementById("hover-me");
let input = document.getElementById("name-input");
let output = document.getElementById("output");

heading.addEventListener("mouseover", function () {
  heading.style.color = "green";
});

input.addEventListener("input", function () {
  output.textContent = "You typed: " + input.value;
});

Tips for Beginners

• addEventListener() can be used on any DOM element
• The event type is a string (e.g., "click")
• You can attach multiple listeners to the same element
• Use .value to read from <input>, and .textContent to update elements
• Don’t use onclick="..." in HTML — keep JavaScript and HTML separate

Practice Challenge

HTML:

<button id="like-btn">Like 👍</button>
<p id="likes-count">Likes: 0</p>

Task:

• Each time the button is clicked, increase the like count by 1.

JavaScript:

let count = 0;
let button = document.getElementById("like-btn");
let display = document.getElementById("likes-count");

button.addEventListener("click", function () {
  count++;
  display.textContent = "Likes: " + count;
});