Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 3 · 4 / 7Events and handlers
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Events and handlers
01 / 10Overview

Events and handlers

You'll learn how a page reacts to a click: you hand the browser a function, and it calls that function each time the event happens.

Why it mattersApps wait for people. Every tap, typed letter and button press in React Native is an event with a handler.
about 75 min·needs: Functions in, values out, Arrow functions, Common HTML elements
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Article
Introducing eventsMDN · Learn web development · 25 min · English
MMamun's noteRead "What is an event?", "Using addEventListener()" and "Event objects". Read "Inline event handlers — don't use these" once, so you know why. Skip the rest.
Video
Learn JavaScript event listeners in 18 minutesYouTube · Web Dev Simplified · 3 min · English
MMamun's noteWatch 0:56–3:52, the addEventListener basics. Bubbling and delegation after that are useful later, but not needed now.
VideoOptional
JavaScript Bangla tutorial 55: event listenerYouTube · Anisul Islam · 7 min · Bangla
MMamun's noteIn Bangla, about 7 minutes. Anisul adds an event listener to a button step by step. Watch all of it.
ArticleOptional
Introduction to browser eventsjavascript.info · 15 min · English
MMamun's noteRead "Possible mistakes". It shows the addOne() vs addOne mistake in detail. Then "addEventListener" and "Event object".
03 / 10

See it step by step

Set up a handler, then watch each click run it.

runs0
ScreenRuns: 0[ + 1 run ]
score.js
1let runs = 0;
2function addRun() {
3 runs = runs + 1;
4 scoreText.textContent = "Runs: " + runs;
5}
6button.addEventListener("click", addRun);
7console.log("ready");
runs starts at 0. The page shows the score and a button.
Step 1 / 8
04 / 10

Explanation

Most code you've seen runs from top to bottom and then stops. But an app has to wait. It can't know when you'll tap "Send money". It needs a way to say: when this happens, run that.

Something that happens on the page, like a click, a key press or a form being sent, is called an event. The function you want to run is called an event handler.

Think of a doorbell. You don't stand at the door all day. You fix a bell, and when someone presses it, the bell rings and you go. Setting up the handler is fixing the bell. The click is someone pressing it.

const button = document.querySelector("button");
let score = 0;
 
button.addEventListener("click", () => {
  score = score + 1;
  console.log("Score:", score);
});

addEventListener takes two things: the event name ("click") and a function. The browser keeps that function and calls it later, once for every click. A function you hand over to be called later is a callback. Nothing inside it runs when the page loads. Only the setup runs.

The browser also passes your handler an event object with details about what happened: (event) => console.log(event.type) prints click. For a text box, event.target.value is what the person typed.

People often write addEventListener("click", addOne()). The brackets call addOne right now, once, and hand over its result (undefined) instead of the function. Pass the name with no brackets: addEventListener("click", addOne). Or wrap it in an arrow: () => addOne().

In React you'll write the same idea as <button onClick={addOne}>. Same rule, same mistake.

When you read event code, find three things: which element, which event, and which function runs. Then remember that function's body runs later, not now.

Words to recognise
eventevent handleraddEventListenercallbackevent objectclick
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const button = document.querySelector("#add-run");
Mentor note · line 1
Find the button on the page, so you can attach a handler to it.
2const scoreText = document.querySelector("#score");
3let runs = 0;
4
function addRun() {
6 runs = runs + 1;
scoreText.textContent = "Runs: " + runs;
8}
9
button.addEventListener("click", addRun);
11
document.querySelector("#name").addEventListener("input", (event) => {
13 console.log("Typed:", event.target.value);
14});
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1let count = 0;
2function addOne() {
3  count = count + 1;
4  console.log("clicked", count);
5}
6button.addEventListener("click", addOne);
7console.log("ready", count);
8// Now the user clicks the button twice.
What does this print?
DrillFind the bug2 / 2
taps should stay 0 until the button is clicked, then go up by one on each click. Here button is a plain event target, and the checks click it for you. Fix the code so both checks pass.
1
2
3
4
5
6
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3button.addEventListener("click", () => console.log("Paid")); When is Paid printed?
  2. 2 / 3Which line runs addOne on every click?
  3. 3 / 3In input.addEventListener("input", (event) => ...), where is the text the person typed?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Events and handlers?

10 / 10

Done

You can now
Read addEventListener or onClick code and say which function runs, and when.
Next: Promises and await Back to Phase 3
On this page
  1. 01Events and handlers
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 3JavaScript for real apps
7 topics · 3–4 wks
  1. 1Arrow functions
  2. 2Destructuring and spread
  3. 3Modules and npm
  4. 4Events and handlers
  5. 5Promises and await
  6. 6Fetching real data
  7. 7Loading and error states
JourneyPhase 3Events and handlers
01 / 10Overview

Events and handlers

You'll learn how a page reacts to a click: you hand the browser a function, and it calls that function each time the event happens.

Why it mattersApps wait for people. Every tap, typed letter and button press in React Native is an event with a handler.
about 75 min·needs: Functions in, values out, Arrow functions, Common HTML elements
02 / 10

Watch & read

Start with the required ones. The others are there when you need them.

Article
Introducing eventsMDN · Learn web development · 25 min · English
MMamun's noteRead "What is an event?", "Using addEventListener()" and "Event objects". Read "Inline event handlers — don't use these" once, so you know why. Skip the rest.
Video
Learn JavaScript event listeners in 18 minutesYouTube · Web Dev Simplified · 3 min · English
MMamun's noteWatch 0:56–3:52, the addEventListener basics. Bubbling and delegation after that are useful later, but not needed now.
VideoOptional
JavaScript Bangla tutorial 55: event listenerYouTube · Anisul Islam · 7 min · Bangla
MMamun's noteIn Bangla, about 7 minutes. Anisul adds an event listener to a button step by step. Watch all of it.
ArticleOptional
Introduction to browser eventsjavascript.info · 15 min · English
MMamun's noteRead "Possible mistakes". It shows the addOne() vs addOne mistake in detail. Then "addEventListener" and "Event object".
03 / 10

See it step by step

Set up a handler, then watch each click run it.

runs0
ScreenRuns: 0[ + 1 run ]
score.js
1let runs = 0;
2function addRun() {
3 runs = runs + 1;
4 scoreText.textContent = "Runs: " + runs;
5}
6button.addEventListener("click", addRun);
7console.log("ready");
runs starts at 0. The page shows the score and a button.
Step 1 / 8
04 / 10

Explanation

Most code you've seen runs from top to bottom and then stops. But an app has to wait. It can't know when you'll tap "Send money". It needs a way to say: when this happens, run that.

Something that happens on the page, like a click, a key press or a form being sent, is called an event. The function you want to run is called an event handler.

Think of a doorbell. You don't stand at the door all day. You fix a bell, and when someone presses it, the bell rings and you go. Setting up the handler is fixing the bell. The click is someone pressing it.

const button = document.querySelector("button");
let score = 0;
 
button.addEventListener("click", () => {
  score = score + 1;
  console.log("Score:", score);
});

addEventListener takes two things: the event name ("click") and a function. The browser keeps that function and calls it later, once for every click. A function you hand over to be called later is a callback. Nothing inside it runs when the page loads. Only the setup runs.

The browser also passes your handler an event object with details about what happened: (event) => console.log(event.type) prints click. For a text box, event.target.value is what the person typed.

People often write addEventListener("click", addOne()). The brackets call addOne right now, once, and hand over its result (undefined) instead of the function. Pass the name with no brackets: addEventListener("click", addOne). Or wrap it in an arrow: () => addOne().

In React you'll write the same idea as <button onClick={addOne}>. Same rule, same mistake.

When you read event code, find three things: which element, which event, and which function runs. Then remember that function's body runs later, not now.

Words to recognise
eventevent handleraddEventListenercallbackevent objectclick
05 / 10

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
const button = document.querySelector("#add-run");
Mentor note · line 1
Find the button on the page, so you can attach a handler to it.
2const scoreText = document.querySelector("#score");
3let runs = 0;
4
function addRun() {
6 runs = runs + 1;
scoreText.textContent = "Runs: " + runs;
8}
9
button.addEventListener("click", addRun);
11
document.querySelector("#name").addEventListener("input", (event) => {
13 console.log("Typed:", event.target.value);
14});
06 / 10

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1let count = 0;
2function addOne() {
3  count = count + 1;
4  console.log("clicked", count);
5}
6button.addEventListener("click", addOne);
7console.log("ready", count);
8// Now the user clicks the button twice.
What does this print?
DrillFind the bug2 / 2
taps should stay 0 until the button is clicked, then go up by one on each click. Here button is a plain event target, and the checks click it for you. Fix the code so both checks pass.
1
2
3
4
5
6
Try 1 of 3 · solution unlocks after 3
07 / 10

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3button.addEventListener("click", () => console.log("Paid")); When is Paid printed?
  2. 2 / 3Which line runs addOne on every click?
  3. 3 / 3In input.addEventListener("input", (event) => ...), where is the text the person typed?
08 / 10

Explain it back

Only you can see this. Log in to keep it.0 words
09 / 10

How confident are you with Events and handlers?

10 / 10

Done

You can now
Read addEventListener or onClick code and say which function runs, and when.
Next: Promises and await Back to Phase 3
On this page
  1. 01Events and handlers
  2. 02Watch & read
  3. 03See it step by step
  4. 04Explanation
  5. 05Code tour
  6. 06Practice
  7. 07Quick check
  8. 08Explain it back
  9. 09Confidence
  10. 10Done
Up next · 02 / 10Watch & read

Most code you've seen runs from top to bottom and then stops. But an app has to wait. It can't know when you'll tap "Send money". It needs a way to say: when this happens, run that.

Something that happens on the page, like a click, a key press or a form being sent, is called an event. The function you want to run is called an event handler.

Think of a doorbell. You don't stand at the door all day. You fix a bell, and when someone presses it, the bell rings and you go. Setting up the handler is fixing the bell. The click is someone pressing it.

const button = document.querySelector("button");
let score = 0;
 
button.addEventListener("click", () => {
  score = score + 1;
  console.log("Score:", score);
});

addEventListener takes two things: the event name ("click") and a function. The browser keeps that function and calls it later, once for every click. A function you hand over to be called later is a callback. Nothing inside it runs when the page loads. Only the setup runs.

The browser also passes your handler an event object with details about what happened: (event) => console.log(event.type) prints click. For a text box, event.target.value is what the person typed.

People often write addEventListener("click", addOne()). The brackets call addOne right now, once, and hand over its result (undefined) instead of the function. Pass the name with no brackets: addEventListener("click", addOne). Or wrap it in an arrow: () => addOne().

In React you'll write the same idea as <button onClick={addOne}>. Same rule, same mistake.

When you read event code, find three things: which element, which event, and which function runs. Then remember that function's body runs later, not now.

Words to recognise
eventevent handleraddEventListenercallbackevent objectclick

Most code you've seen runs from top to bottom and then stops. But an app has to wait. It can't know when you'll tap "Send money". It needs a way to say: when this happens, run that.

Something that happens on the page, like a click, a key press or a form being sent, is called an event. The function you want to run is called an event handler.

Think of a doorbell. You don't stand at the door all day. You fix a bell, and when someone presses it, the bell rings and you go. Setting up the handler is fixing the bell. The click is someone pressing it.

const button = document.querySelector("button");
let score = 0;
 
button.addEventListener("click", () => {
  score = score + 1;
  console.log("Score:", score);
});

addEventListener takes two things: the event name ("click") and a function. The browser keeps that function and calls it later, once for every click. A function you hand over to be called later is a callback. Nothing inside it runs when the page loads. Only the setup runs.

The browser also passes your handler an event object with details about what happened: (event) => console.log(event.type) prints click. For a text box, event.target.value is what the person typed.

People often write addEventListener("click", addOne()). The brackets call addOne right now, once, and hand over its result (undefined) instead of the function. Pass the name with no brackets: addEventListener("click", addOne). Or wrap it in an arrow: () => addOne().

In React you'll write the same idea as <button onClick={addOne}>. Same rule, same mistake.

When you read event code, find three things: which element, which event, and which function runs. Then remember that function's body runs later, not now.

Words to recognise
eventevent handleraddEventListenercallbackevent objectclick