⚡ Module 16 · JS Integration🟡 IntermediateLESSON 57 · MODULE FINAL

Event Handling

⏱️ 16 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress81%

🎯 What you'll learn: addEventListener, common events like click/input/submit, event.preventDefault(), and event delegation.

Section 1

addEventListener

addEventListener attaches a function that runs when a specific event fires on an element. It's preferred over inline onclick="..." attributes since it keeps behavior separate from markup and allows multiple listeners on the same element.

event-basic.html

HTML

<button id="saveBtn">Save</button>

<script>
document.getElementById('saveBtn').addEventListener('click', () => {
  console.log('Save clicked!');
});
</script>

Section 2

preventDefault() on Form Submit

Submitting a form normally reloads the page. event.preventDefault() inside a submit handler stops that default behavior — essential for handling forms with JavaScript (validation, AJAX submission) instead.

event-submit.html

HTML

<form id="signupForm">...</form>

<script>
document.getElementById('signupForm').addEventListener('submit', (e) => {
  e.preventDefault(); // stop the page reload
  console.log('Handling submission with JS instead');
});
</script>

Section 3

Event Delegation

Instead of attaching a listener to every individual item (including ones added later), attach one listener to a shared parent and check event.target to see which child was actually clicked. This handles dynamically-added elements automatically.

event-delegation.html

HTML

<ul id="taskList">
  <li>Task 1</li>
  <li>Task 2</li>
</ul>

<script>
document.getElementById('taskList').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.style.textDecoration = 'line-through';
  }
});
</script>

💡

Delegation handles future elements too

Because the listener lives on the parent, any <li> added to the list later — even after the page loads — is automatically handled without attaching a new listener.

🧩 Knowledge Check — Lesson 57

5 questions to test your understanding.

1. Why is addEventListener generally preferred over inline onclick?

2. What does preventDefault() do in a form's submit handler?

3. What is event delegation?

4. Why is delegation useful for dynamically-added elements?

5. Inside a delegated click handler, how do you know which child was clicked?

💪

Coding Challenge — Lesson 57

Apply what you learned · Intermediate Level

Final Challenge: Build a Delegated To-Do List

Build a ul with 3 li items, and one click listener on the ul that toggles a "done" class (strikethrough) on whichever li was clicked, using event delegation.

💡 Show hints if you're stuck

Use e.target.classList.toggle('done') inside the parent's listener.

✅

Module 16 Complete!

You've mastered how HTML connects to JavaScript — script loading, DOM manipulation, and event handling. Next up: Professional Development, starting with HTML Best Practices.

Finished this lesson?

Mark it complete to track your progress.

Lesson 57 of 62Final Lesson — Module 16

Event Handling

addEventListener

preventDefault() on Form Submit

Event Delegation

Lesson 57 Complete — Module 16 Finished!