JavaScript Event
Handling Lab
Objective
Practice event handling techniques by attaching event
listeners to DOM elements and responding to various
user interactions such as button clicks, form
submissions, keyboard events, and mouse
movements.
Basic Button Click Event
Goal
Learn how to attach a click event listener to a button.
Instructions
1. Create a button with the text "Click Me".
2. Attach a click event listener using JavaScript.
3. When clicked, display an alert saying "Button Clicked!".
Basic Button Solve the Problem
Problem Solved:
Allowing users to trigger actions like submitting forms, opening menus,
adding items to carts, starting/stopping timers, or toggling components.
Button event (click)
Form Submission Event
Goal
Understand how to handle form submit events.
Instructions
1. Create a form with an input and a submit button.
2. Prevent the default form submission.
3. Display the entered value on the page.
Form Submission Solve the Problem
Problem Solved:
Validating user input before sending data to the server—preventing
empty forms, invalid emails, wrong passwords, etc.
Form Submit event.
Mouse Movement Event
Goal
Track mouse movements and display coordinates.
Instructions
1. Add a box div with a fixed size.
2. When the mouse moves inside the box, display its X/Y coordinates
Mouse Movement Solve
Problem Solved:
Tracking pointer movement for drawing apps, image zoom tools, games,
drag-and-drop interfaces, and analytics heatmaps.
Mouse event
Keyboard Events
Goal
Respond to user key presses.
Instructions
1. Create a text paragraph that updates every time a key is pressed.
2. Display the key the user pressed.
Keyboard Events Solve
Problem Solved:
Building search-as-you-type systems, keyboard shortcuts, input
validation, text editors, and accessibility navigation.
Keyboard event
Change Event
Goal
Handle dropdown change events.
Instructions
1. Create a select dropdown with 3 colors.
2. When a color is selected, change the background color of a box.
Change Event Solve
Problem Solved:
Updating the UI when a user picks an option—changing themes, filtering
items, sorting tables, or adjusting settings.
Change Event
Hover Events
Goal
Detect when the mouse enters and leaves an element.
Instructions
1. Create a div.
2. On mouse enter: change background to yellow.
3. On mouse leave: change background to Gray.
Hover Event Solve
Problem Solved:
Creating interactive UI effects—tooltips, menu dropdowns, highlighting
items, product previews, and dashboard widgets.
Hover Event
Input Event
Goal
Detect real-time typing.
Instructions
1. Add a text input.
2. Show what the user is typing in real time below it.
Input Event Solve
Problem Solved:
Displaying dynamic live feedback—live form validation, previewing
messages, updating search results, and reflecting user typing instantly.
Input Event
Custom Events
Goal
Create and dispatch a custom event.
Instructions
1. Create a custom event named messageSent.
2. When a button is clicked, dispatch the event.
3. Listen for the event and display a message.
Custom Events Solve
Problem Solved:
Enabling communication between unrelated components—like sending
notifications across modules, triggering UI updates, or building
publishers /subscribers systems.
Custom Event
End of Lab
Great job! These exercises will help you build strong foundational skills in
event handling using JavaScript.
