Why should you care?

Every button, form, and keyboard shortcut in a web app is wired through events.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

<input id="name" placeholder="Type your name" />
<p id="out"></p>
<script>
  const input = document.getElementById("name");
  const out = document.getElementById("out");
  input.addEventListener("input", () => {
    out.textContent = "Hello, " + input.value;
  });
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• The input event fires on every keystroke.
• input.value reads the text box.
• The paragraph updates live as you type.

Practice next

1. Type in input and watch live hello message.
2. Add form submit with e.preventDefault().
3. Log event.type inside handler.
4. Listen for keydown Enter on the input to trigger an action.
5. Use event.target vs event.currentTarget on nested elements.

Remember

addEventListener("event", handler) Common: click, input, submit event.target is the element that fired

ScriptVerse live preview

Markdown editor fires input events to re-render preview on every keystroke.

Outcome: Event-driven UI keeps forms responsive and familiar to users.