JavaScript Events Explained: addEventListener, Click & Input | JavaScript Tutorial #8
Description: Make your website react to clicks and typing! Learn how JavaScript events turn a static page into an interactive one 🚀
In this video, you'll learn:
✅ What an event is (clicks, typing, key presses, form submits)
✅ How to add a button and grab it with querySelector
✅ addEventListener: the event name plus a function to run
✅ The parentheses mistake almost everyone makes, and how to fix it
✅ Writing the listener as an arrow function
✅ Building a real likes counter that updates the page on every click
✅ The input event: a live greeting that updates as you type
🎯 Your challenge:
Add a click listener to the h1 heading. When it's clicked, change the tagline to "Thanks for visiting BentHub!" Click the name, and the tagline should change instantly!
▶️ Next episode: Objects: one variable that holds a whole profile, with name, age, skills and more.
⏱️ Chapters:
0:00 Intro
0:27 Adding a button
0:45 Your first event listener
1:29 The parentheses mistake
1:57 Arrow functions in listeners
2:07 Building a likes counter
2:32 Other events: input, submit, keydown
2:40 Live greeting with the input event
3:07 Recap
3:35 Your challenge and what's next
🔔 Subscribe and follow BentHub for more coding tutorials, made simple.
Understand programming. Code with confidence.
#JavaScript #LearnJavaScript #LearnToCode #WebDevelopment #JavaScriptTutorial #CodingForBeginners #BentHub Close description
In this video, you'll learn:
✅ What an event is (clicks, typing, key presses, form submits)
✅ How to add a button and grab it with querySelector
✅ addEventListener: the event name plus a function to run
✅ The parentheses mistake almost everyone makes, and how to fix it
✅ Writing the listener as an arrow function
✅ Building a real likes counter that updates the page on every click
✅ The input event: a live greeting that updates as you type
🎯 Your challenge:
Add a click listener to the h1 heading. When it's clicked, change the tagline to "Thanks for visiting BentHub!" Click the name, and the tagline should change instantly!
▶️ Next episode: Objects: one variable that holds a whole profile, with name, age, skills and more.
⏱️ Chapters:
0:00 Intro
0:27 Adding a button
0:45 Your first event listener
1:29 The parentheses mistake
1:57 Arrow functions in listeners
2:07 Building a likes counter
2:32 Other events: input, submit, keydown
2:40 Live greeting with the input event
3:07 Recap
3:35 Your challenge and what's next
🔔 Subscribe and follow BentHub for more coding tutorials, made simple.
Understand programming. Code with confidence.
#JavaScript #LearnJavaScript #LearnToCode #WebDevelopment #JavaScriptTutorial #CodingForBeginners #BentHub Close description
