I cannot directly create a PDF document.
However, I can provide the content in a format
suitable for easy conversion to PDF. I will include simple questions and quiz elements as
requested.
JavaScript Events Training Course
This course will cover the fundamentals of JavaScript events, including how to handle them,
different types of events, and advanced concepts like event bubbling and capturing.
Module 1: Introduction to JavaScript Events
Objective: Understand what JavaScript events are and how they are used to make web
pages interactive.
Content:
• What are JavaScript Events? (Based on [Link])
• Definition: Changes in the state of an object, performed by the user or the browser.
• Role of JavaScript: Reacting to events to make web pages dynamic.
• Event Handling: The process of reacting to events.
• Event Handlers: HTML attributes (e.g., onclick) or JavaScript properties used to handle
events.
• How Events Work:
• User interactions (e.g., clicks, mouse movements, key presses).
• Browser actions (e.g., page load, resize).
• Connecting events to JavaScript code.
Activities/Examples:
• Click Event: (Based on [Link])
HTML
<html>
<head>
<script language="Javascript" type="text/Javascript">
function clickevent() {
[Link]("This is a program of click event");
}
</script>
</head>
<body>
<input type="button" onclick="clickevent()" value="Who's this?">
</body>
</html>
• Explanation: The onclick attribute calls the clickevent() function when the button is clicked.
Simple Question:
1. What is the primary purpose of JavaScript events? a) To style HTML elements b) To make
web pages interactive c) To store data on the server d) To create complex animations
Module 2: Common Event Types and Handlers
Objective: Learn about various common event types and their corresponding event handlers.
Content:
• Mouse Events: (Based on [Link])
• click: When mouse click on an element.
• mouseover: When the cursor comes over the element.
• mouseout: When the mouse leaves an element.
• mousedown: When the mouse button is pressed over the element.
• mouseup: When the mouse button is released over the element.
• mousemove: When the mouse movement takes place.
• Keyboard Events: (Based on [Link])
• keydown & keyup: When the user presses and then releases a key.
• Form Events: (Based on [Link])
• focus: When the user focuses on an element (e.g., clicks into a text input).
• Window/Document Events: (Based on [Link])
• load: When the browser finishes loading the page.
• unload: When the visitor leaves the current webpage.
• resize: When the window size is resized.
• scroll: When the visitor scrolls a scrollable area.
Activities/Examples:
• MouseOver Event: (Based on [Link])
HTML
<html>
<head>
<script language="Javascript" type="text/Javascript">
function mouseoverevent() {
alert("This is a program of mouseover event");
}
</script>
</head>
<body>
<p onmouseover="mouseoverevent()">Keep cursor over me</p>
</body>
</html>
• Focus Event: (Based on [Link])
HTML
<html>
<head>
<script>
function focusevent() {
[Link]("input1").[Link]="aqua";
}
</script>
</head>
<body>
<h2>Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()">
</body>
</html>
• Keydown Event: (Based on [Link])
HTML
<html>
<head>
<script>
function keydownevent() {
alert("Pressed a key");
}
</script>
</head>
<body>
<h2>Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()">
</body>
</html>
Quiz:
Match the event handler with its description:
Event Descripti
Handler on
onmouseout
onload
onfocus
onkeydown
Descriptions:
A. When the browser finishes loading the page.
B. When the user clicks into an input field.
C. When the mouse cursor leaves an element.
D. When a key is pressed down.
Module 3: Event Listeners
Objective: Learn the modern way of handling events using addEventListener().
Content:
• The addEventListener() Method: (Based on [Link])
• Syntax: [Link](event, function, useCapture).
• event: The event type as a string (e.g., "click", "mouseover").
• function: The function to be executed when the event occurs. Can be a named function or an
anonymous function.
• useCapture: A boolean value specifying whether to use event capturing (true) or bubbling
(false). Default is false.
• Adding a Single Event Listener: (Based on [Link])
HTML
<html>
<body>
<button>Click Me!</button>
<script>
const el = [Link]("button");
// use an arrow function as a parameter
[Link]("click", () => alert("Alert!"));
</script>
</body>
</html>
• Invoking Multiple Functions on a Single Event Listener: (Based on IMG-20250611-
[Link])
• You can add multiple event listeners of the same type to the same element without overwriting
each other.
HTML
<html>
<body>
<button>Click Me!</button>
<script>
const el = [Link]("button");
[Link]("click", () => alert("Alert 1"));
[Link]("click", () => alert("Alert 2"));
</script>
</body>
</html>
• Adding Multiple Event Listeners for Different Events on the Same Element: (Based on
[Link])
HTML
<html>
<style>hidden { display: none }</style>
<body>
<button>Mouseover or Click Me!</button>
<p class="hidden">Mouse over...</p>
<script>
const p = [Link]("p");
const el = [Link]("button");
[Link]("click", () => alert("Alert!"));
[Link]("mouseover", () => [Link]("hidden"));
[Link]("mouseout", () => [Link]("hidden"));
</script>
</body>
</html>
• Removing an Event Listener: (Based on [Link])
• removeEventListener() method.
• Important: The method requires the exact same function reference that was used for
addEventListener(). Anonymous functions cannot be easily removed this way.
HTML
<html>
<body>
<button>If an event exists, a click will fire an alert</button>
<script>
// add event listener
[Link]("button").addEventListener("click", alertMe);
// remove event listener
[Link]("button").removeEventListener("click", alertMe);
function alertMe() {
alert("Alert!");
}
</script>
</body>
</html>
Simple Questions:
1. What is the main advantage of using addEventListener() over traditional event handlers like
onclick?
2. Can you remove an event listener that was added using an anonymous function? Why or why
not?
Puzzle/Code Challenge:
Write JavaScript code that adds a "dblclick" (double click) event listener to a div element.
When the div is double-clicked, its background color should change to lightgreen.
Module 4: Event Capturing and Bubbling
Objective: Understand the concept of event propagation in the DOM, including capturing and
bubbling phases.
Content:
• What are Event Capturing and Bubbling? (Based on [Link] and
[Link])
• Two phases of event propagation in the DOM (Document Object Model).
• Allows for a structured approach to event handling when dealing with nested elements.
• Event Flow Diagram: (Based on [Link])
• Imagine a diagram similar to the one in your sheet, showing events starting at the Document,
going down through html, body, div, button (capturing), and then bubbling back up from button
through div, body, html, to Document (bubbling).
• Event Capturing: (Based on [Link] and [Link])
• The phase where an event descends from the highest level of the DOM (e.g., Document)
down to the target element.
• Allows for interception of events before they reach their intended target.
• Enabled by setting the third argument of addEventListener() to true.
• Example:
HTML
<html>
<body>
<div style="background-color: yellow; padding: 20px;">
<button>Click me!</button>
</div>
<script>
const div = [Link]('div');
const button = [Link]('button');
[Link]('click', () => {
alert('Div clicked (Capturing)');
}, true); // Capturing phase
[Link]('click', () => {
alert('Button clicked (Capturing)');
}, true); // Capturing phase
</script>
</body>
</html>
If you click the button, "Div clicked (Capturing)" will alert first, then "Button clicked
(Capturing)".
• Event Bubbling: (Based on [Link] and [Link])
• The phase where an event bubbles up from the target element back up to the Document.
• This is the default behavior when useCapture is false or omitted.
• Example:
HTML
<html>
<body>
<div style="background-color: pink; padding: 20px;">
<button>Click me!</button>
</div>
<script>
const div = [Link]('div');
const button = [Link]('button');
[Link]('click', () => {
alert('Div clicked (Bubbling)');
}); // Bubbling phase (default)
[Link]('click', () => {
alert('Button clicked (Bubbling)');
}); // Bubbling phase (default)
</script>
</body>
</html>
If you click the button, "Button clicked (Bubbling)" will alert first, then "Div clicked (Bubbling)".
• Distinguishing Between Capturing and Bubbling:
• Capturing: Event travels down the DOM tree. Useful for intercepting events early.
• Bubbling: Event travels up the DOM tree. Most common, often used for event delegation.
• Controlling Bubbling:
• [Link](): A method that can be called inside an event listener function to
prevent the event from continuing to bubble up (or capture down) to parent (or child)
elements.
Simple Questions:
1. In event bubbling, does the event fire on the target element first or the parent element first?
2. What value should be passed as the third argument to addEventListener() to enable event
capturing?
Puzzle/Scenario:
You have a div containing a button. You want an alert("Button Clicked") to show ONLY when
the button is clicked directly, and you want to prevent any div click handlers from firing when
the button is clicked. How would you achieve this using [Link]()?
Conclusion
This training course provides a solid foundation in JavaScript events, event handling, and
event propagation concepts. By understanding these principles, you can create dynamic and
interactive web applications.
Answer Key
Module 1 Simple Question:
1. b) To make web pages interactive
Module 2 Quiz:
• onmouseout: C. When the mouse cursor leaves an element.
• onload: A. When the browser finishes loading the page.
• onfocus: B. When the user clicks into an input field.
• onkeydown: D. When a key is pressed down.
Module 3 Simple Questions:
1. addEventListener() allows multiple event handlers for the same event on the same element,
and it supports event capturing/bubbling. Traditional onclick overwrites any previously
assigned handler.
2. It's difficult to remove an event listener added with an anonymous function because
removeEventListener() requires a reference to the exact function that was added. Anonymous
functions don't have a name to reference.
Module 3 Puzzle/Code Challenge:
JavaScript
const myDiv = [Link]('div');
[Link] = '200px';
[Link] = '100px';
[Link] = '1px solid black';
[Link](myDiv);
[Link]('dblclick', () => {
[Link] = 'lightgreen';
});
Module 4 Simple Questions:
1. In event bubbling, the event fires on the target element first, then its parent elements.
2. true
Module 4 Puzzle/Scenario:
HTML
<html>
<body>
<div id="myDiv" style="background-color: lightblue; padding: 20px;">
This is the div.
<button id="myButton">Click Me</button>
</div>
<script>
const myDiv = [Link]('myDiv');
const myButton = [Link]('myButton');
[Link]('click', () => {
alert('Div Clicked!');
});
[Link]('click', (event) => {
alert('Button Clicked!');
[Link](); // Stop the event from bubbling up to the div
});
</script>
</body>
</html>
