Events in real interfaces: from basic clicks to smart delegation

Learn how to design maintainable interactions with `addEventListener`, the `event` object, `preventDefault`, propagation control and delegation for dynamic lists.

How much do you know about JavaScript?

📘 Theory

A useful event model: trigger, surface, logic and result

Before writing code, define the interaction as a clear rule.

A good sentence is: when X happens on Y, run Z and update W. That structure keeps event code readable even as the interface grows.

Not every event expresses the same intention. `input` is continuous feedback, while `change` and `submit` usually mean the user has finished a step.

Trigger

What happens exactly.

click
submit
keydown

Surface

Where you listen.

button
form
delegated container

Logic

What your code decides.

validate
toggle
route an action

Result

What changes in the UI.

update text
disable a button
remove an item

`addEventListener` with architectural intent

Listen where it makes sense, not where the first selector happens to work.

`addEventListener` keeps markup and behavior separate, and it lets you attach more than one listener to the same node without collisions.

In small components, it helps to cache references in a `ui` object and register them inside a `bindEvents()` function.

Name handlers by intention, such as `onSaveClick`.
Avoid inline listeners in HTML.
Group event binding to make teardown and testing easier.

Understanding `event`: target, currentTarget and default behavior

Many event bugs come from reading the wrong property.

`event.target` is the node that originated the event. `event.currentTarget` is the node that owns the listener. Delegation depends on understanding that difference.

When a button contains an icon or nested text, the click may start on that child node. That is why `closest()` becomes such a practical tool.

`preventDefault()` and event flow control

Control which native action should run and when your own logic should interrupt it.

`preventDefault()` stops the native browser action, such as form submission or link navigation. Use it when you need to validate, confirm or transform data first.

`stopPropagation()` can also help in specific cases, but use it carefully so you do not hide useful events from higher layers of the UI.

1 A useful event model: trigger, surface, logic and result 2 `addEventListener` with architectural intent 3 Understanding `event`: target, currentTarget and default behavior 4 `preventDefault()` and event flow control

🧪 Learn by doing

Example Guided example: a keyboard shortcut for search Listen globally to `keydown` and react only to `Ctrl + K`, with automatic focus on the search field.

⌄

Example Interactive demo: a mini task board Add tasks and mark them done or remove them with a single delegated listener.

⌄

🏁 Challenges

Challenge Challenge: click and double click on the same button Register both events and update a status paragraph with a different message for each case.

⌄

🧰 Resources

Useful links

MDN: Event reference MDN: addEventListener javascript.info: Introduction to browser events MDN: Event.preventDefault MDN: Event.currentTarget MDN: Event bubbling

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 24

Applied DOM work: render, update and debug interfaces without chaos

Lesson 26

Event delegation: fewer listeners, more scalability

›