Lesson 13 of 18

⚡ Events & Interactivity

🎯 Grades 9–12 ⏱ ~40 minutes 🟡 Intermediate

What You'll Learn

addEventListener: click, input, submit, keydown, mouseover
The event object: target, value, key, preventDefault()
Building interactive UI components: tabs, counters, live filters

⚡ Interactive Widget Builder

Build and run a fully interactive page with tabs, a counter, and a live search filter.

<style>
body{font-family:sans-serif;padding:1rem;background:#f8fafc}
.tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.tab{padding:.4rem .9rem;border:none;border-radius:6px;cursor:pointer;background:#e2e8f0}
.tab.active{background:#3b82f6;color:#fff}
.panel{display:none;padding:1rem;background:#fff;border-radius:8px;border:1px solid #e2e8f0}
.panel.active{display:block}
.counter{display:flex;gap:1rem;align-items:center;margin-top:1rem}
.counter button{padding:.4rem .9rem;border:none;border-radius:6px;cursor:pointer;background:#3b82f6;color:#fff;font-size:1.1rem}
#count-val{font-size:2rem;font-weight:800;color:#1e293b}
input{padding:.4rem .75rem;border:1px solid #cbd5e1;border-radius:6px;width:100%;box-sizing:border-box;margin:.5rem 0}
.item{padding:.4rem;border-bottom:1px solid #e2e8f0}
</style>
<div class="tabs">
  <button class="tab active" data-tab="counter">Counter</button>
  <button class="tab" data-tab="filter">Filter</button>
</div>
<div id="counter" class="panel active">
  <p>Click the buttons to change the count.</p>
  <div class="counter">
    <button id="dec">−</button>
    <span id="count-val">0</span>
    <button id="inc">+</button>
  </div>
</div>
<div id="filter" class="panel">
  <input type="text" id="search" placeholder="Filter languages..."/>
  <div id="lang-list"></div>
</div>
<script>
  // Tabs
  document.querySelectorAll(".tab").forEach(tab => {
    tab.addEventListener("click", function() {
      document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
      document.querySelectorAll(".panel").forEach(p => p.classList.remove("active"));
      this.classList.add("active");
      document.getElementById(this.dataset.tab).classList.add("active");
    });
  });
  // Counter
  let count = 0;
  const val = document.getElementById("count-val");
  document.getElementById("inc").addEventListener("click", () => { count++; val.textContent = count; });
  document.getElementById("dec").addEventListener("click", () => { count--; val.textContent = count; });
  // Filter
  const langs = ["JavaScript","Python","Java","TypeScript","C++","Go","Rust","Ruby","Swift","Kotlin"];
  function renderList(filter) {
    document.getElementById("lang-list").innerHTML = langs
      .filter(l => l.toLowerCase().includes(filter.toLowerCase()))
      .map(l => `<div class="item">${l}</div>`).join("");
  }
  document.getElementById("search").addEventListener("input", e => renderList(e.target.value));
  renderList("");
</script>

Quick Check

1. Which method is the preferred way to attach event handlers?

Ael.onclick = function() {}

Bel.addEventListener("click", fn)

C<button onclick="fn()">

2. Which event fires on every keystroke in an input?

Ainput

Bchange

Ckeypress

3. What does e.preventDefault() do on a form submit event?

ASubmits the form via AJAX

BPrevents the page from reloading when the form submits

CRemoves the form from the DOM

4. e.target in an event callback refers to…

AThe element that triggered the event

BThe parent element

CThe document object