Frontend Master

JavaScript Curriculum

Events — Fundamentals
+50 XP

Events — Fundamentals

easy
~30 min·50 XP

The coffee shop page is live. Now customers need to interact — clicking the order button, pressing Enter to search, submitting the contact form. Events are how JavaScript listens and responds.

Events — Fundamentals

The browser fires events constantly — clicks, keypresses, form submissions, scroll, resize. addEventListener is how you listen for them and run code in response.

addEventListener vs onclick vs HTML attributes

Three ways to attach events — only one is correct for modern code:

event-listener.js

The modern standard. Attach multiple listeners to the same event. Can be removed later. Always use this.

const btn = document.querySelector('.order-btn')

btn.addEventListener('click', (event) => {
  console.log('Clicked!', event.target)
})

// Multiple listeners on same event — both fire:
btn.addEventListener('click', () => logAnalytics('order-click'))
✓ Pros
· Multiple listeners on same element
· Can be removed with removeEventListener
· Supports options (once, passive, capture)
Live demo
fired: 0×
// Click the demo button
💡Always use addEventListener
addEventListener is the only approach that supports multiple listeners on the same element, can be removed, and supports options like once and passive. The onclick property and HTML onclick="" attributes are legacy patterns — avoid them.

The Event Object

Every listener receives an event object packed with information about what happened:

event-object.js
event.target

The element that triggered the event — the one actually clicked.

Example value<button class="order-btn">
btn.addEventListener('click', (event) => {
  console.log(event.target)
  // → <button class="order-btn">
})
ℹ️event.target vs event.currentTarget
event.target is the element the user actually interacted with. event.currentTarget is the element the listener is attached to. They differ when an event bubbles — a click on a button inside a card gives target = button but currentTarget = whatever element has the listener. This is the foundation of event delegation (Lesson 10).

Removing Event Listeners

Listeners can be removed — essential for cleanup in single-page apps:

remove-listener.js
addEventListener('click', handler)always fires
addEventListener('click', handler, { once: true })fires once
removeEventListener('click', namedFn)attached
function namedFn() { console.log('fired') }
btn.addEventListener('click', namedFn)
// later:
btn.removeEventListener('click', namedFn)
// Must pass same function reference!
// Click buttons to see listeners fire
⚠️removeEventListener needs the same function reference
To remove a listener, you must pass the exact same function reference you used to add it. Anonymous arrow functions cannot be removed because each one is a unique object. Always store the function in a variable when you plan to remove it later.

Your Challenge

Attach two click listeners to the order button — one logs event.type, one logs event.timeStamp. Both should fire on each click. Then attach a third with { once: true } that logs "first click bonus!" — verify it only fires once.

Challenge

Attach a click listener to the order button that logs event.target.textContent. Attach a second listener to the same button that logs the timestamp. Verify both fire. Then use { once: true } to attach a third listener that fires only once.

addEventListenerremoveEventListenerevent-objectevent.targetevent.typeevent.preventDefaultonce-optionnamed-functions
Events — Fundamentals | Nexus Learn