Computer Science
Grade 8
20 min
Event Handling
Event Handling
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define what an event is in the context of web development.
Identify at least three common user-generated events (e.g., click, mouseover, keydown).
Use the `getElementById` method to select an HTML element in JavaScript.
Write a simple function to act as an event handler.
Use the `addEventListener()` method to attach an event handler function to an HTML element.
Create a simple interactive web page where a user action triggers a change on the page.
Ever wondered how a website knows when you click a button or hover your mouse over a picture? 🤔 That's the magic of event handling!
In this lesson, you'll learn how to make your web pages react to user actions. We'll explore how JavaScript 'listens' for events like clicks and mouse mov...
2
Key Concepts & Vocabulary
TermDefinitionExample
EventAn action that happens in the browser, like a user clicking the mouse, pressing a key on the keyboard, or the page finishing loading.A user clicking on a button is a 'click' event.
Event ListenerA procedure in JavaScript that waits (or 'listens') for a specific event to happen on a specific HTML element.Setting up an event listener on a button to wait for a 'click' event.
Event HandlerThe function that is called and executed when the event listener hears the event it was waiting for.A function named `changeColor` that runs when a 'click' event occurs.
DOM (Document Object Model)A tree-like representation of an HTML document. JavaScript uses the DOM to find and manipulate HTML elements.Using JavaScript to find a `<p>`...
3
Core Syntax & Patterns
The addEventListener() Method
element.addEventListener('eventName', functionName);
This is the modern and most common way to handle events. You first select an HTML element, then use this method to tell it which event to listen for (like 'click') and which function to run when that event happens.
The Event Handler Function
function functionName() {
// code to run when the event happens
}
This is a standard JavaScript function that you define. It contains the code you want to execute in response to an event. The name of this function is passed as the second argument to `addEventListener()`.
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
Given `<button id="action">Go</button>` and JS `const btn = document.getElementById('action'); btn.addEventListener('clik', sayHello);`, why will the `sayHello` function never run when the button is clicked?
A.The `id` 'action' is a reserved keyword.
B.The variable `btn` should have been declared with `var`.
C.There is a typo in the event name; 'clik' should be 'click'.
D.The `sayHello` function was not defined before being used.
Challenging
A script in the `<head>` of an HTML file tries to add a listener to a button in the `<body>`. The console shows an error: "Cannot read properties of null (reading 'addEventListener')". What is the most likely cause and solution?
A.The script ran before the button existed, so `getElementById` returned `null`. The solution is to move the `<script>` tag to the end of the `<body>`.
B.The button's ID has a typo in the HTML file. The solution is to fix the ID in the HTML.
C.The `addEventListener` method is spelled incorrectly. The solution is to correct the spelling in the JavaScript file.
D.The browser security settings are blocking the script. The solution is to change browser settings.
Challenging
You want to make paragraph B change text when you hover over image A. Inside the event handler function attached to image A's 'mouseover' event, what is the first step you must take to modify paragraph B?
A.Add a new event listener to paragraph B.
B.Remove the event listener from image A.
C.Create a new function to handle paragraph B.
D.Use `document.getElementById()` to select paragraph B.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free