Events

Learning objectives#

• Listen for events with addEventListener
• Use the event object (target, key)
• Handle input, keyboard and form events
• Stop default browser behaviour with preventDefault

Explanation#

element.addEventListener('click', handler) runs handler every time the event happens.

The handler receives an event object with details: e.target (the element), e.key (for keyboard events), and more.

Common events: click, input (every keystroke), change, keydown, submit, mouseover, scroll.

e.preventDefault() stops the browser’s default action — for example, stopping a form from reloading the page.

Code example: Reacting to the user#

1<input id="name" placeholder="Type your name">
2<p id="hello">Hello!</p>
3<button id="count">Clicked 0 times</button>
4<form id="form"><button>Submit</button></form>
5

6<script>
7  const hello = document.querySelector('#hello');
8  document.querySelector('#name').addEventListener('input', (e) => {
9    hello.textContent = `Hello, ${e.target.value || 'stranger'}!`;
10  });
11

12  let clicks = 0;
13  const btn = document.querySelector('#count');
14  btn.addEventListener('click', () => {
15    clicks++;
16    btn.textContent = `Clicked ${clicks} times`;
17  });
18

19  document.addEventListener('keydown', (e) => console.log('Key pressed:', e.key));
20

21  document.querySelector('#form').addEventListener('submit', (e) => {
22    e.preventDefault();
23    console.log('Form submit stopped — no page reload');
24  });
25</script>

Typing updates the greeting live; the button counts clicks; key presses are logged; submitting the form logs a message instead of reloading.

Step-by-step explanation#

1. The input event fires on every keystroke; e.target.value is the current text.
2. The click handler updates a counter stored in a variable.
3. A keydown listener on document logs every key.
4. preventDefault stops the form’s normal page reload so JavaScript can handle it.

Real-world use case#

Common mistakes#

Best practices#

• Use addEventListener rather than onclick attributes
• Use input for live updates and change for final values
• Use event delegation for long or dynamic lists
• Remove listeners you no longer need

Remember this#

Practice exercise#

1<textarea id="t" maxlength="100"></textarea>
2<p id="c">0 / 100</p>
3<script>
4  document.querySelector('#t').addEventListener('input', e => {
5    document.querySelector('#c').textContent = `${e.target.value.length} / 100`;
6  });
7</script>

Mini quiz#

Want more? Practise all JavaScript MCQs · JavaScript interview questions

Related topics#

My notes#

Saved in this browser.