BitWithBite
JavaScript Worksheet
⚡ Events
SCORE___ / 20
NameClassDate
After this worksheet you can
Listen with addEventListenerUse the event objectCommon events (click, input, submit)Prevent default behaviour📚 Quick Recap
🎯 What you'll learn: Events are how users interact with web pages. You'll master addEventListener, the event object, event delegation, keyboard and mouse events, custom events, form validation, and preventing default browser behavior.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Attach a click handler with:
2The handler's parameter (e) is the:
3Typing in an input fires:
4Stop a form reloading with:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5btn.addEventListener('', fn) for clicks.
6e. is the element that fired the event.
7Alert 'Hi' when #btn is clicked.
8Log what the user types in an input.
9Why preventDefault on submit?
🚀 Section C · Challenge ● CHALLENGE 5
10One listener for many buttons - technique?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-A | 5 click 6 target 7 = btn.addEventListener('click', ()=>alert('Hi')) 8 = inp.addEventListener('input', e=>console.log(e.target.value)) 9 = To handle the form with JS instead of reloading the page | 10 = Event delegation on a parent, checking e.target