JavaScript Events are actions or occurrences that happen in the
browser. They can be triggered by various user interactions or by the
browser itself.
Keyboard events are a feature of JavaScript. They enable developers to
handle user interactions through events, allowing them to respond to user
keystrokes in real-time. Whether you’re building a game, a form, or an
interactive application, understanding how to handle keyboard events is
essential.
Types of Keyboard Event
1. keydown: Pressing down a key fires this event.
2. keypress: Developers used this deprecated event to capture the
typed character. For modern applications, it’s recommended to use
the input event for this purpose.
3. keyup: Releasing a key triggers this event.
Event Properties
[Link]: The value of the key pressed (e.g., ‘a’, ‘Enter’).
[Link]: The physical key on the keyboard (e.g., ‘KeyA’,
‘ArrowRight’).
[Link], [Link], [Link], [Link]:
Boolean properties that indicate whether these modifier keys are
pressed.
[Link]: Indicates if holding down the key causes the event
to fire repeatedly..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Keyboard Event Example</title>
</head>
<body>
<h1>Press any key</h1>
<p id="output"></p>
<script>
[Link]('keydown', function(event) {
const output = [Link]('output');
[Link] = `Key: ${[Link]}, Code: ${[Link]}`;
});
</script>
</body>
</html>
Explain DOM2 Event Model in Detail
Ans: The DOM 2 event model is a standard for handling events in web browsers. It is an
improvement over the original DOM event model, which had some limitations and
inconsistencies. The DOM 2 event model defines a standard set of event types and provides a
way to register event listeners for those events. It also introduces the concept of event
propagation, which allows events to be handled at different levels of the document hierarchy.
The DOM 2 event model is supported by most modern web browsers and is widely used in
web development.
While the DOM 0 model is still widely supported and used, the DOM 2 model introduces a
more modular and flexible way to manage events, with better support for a wider range of
event types and interactions.
Key Features of the DOM 2 Event Model
1. Standard Event Types: The DOM 2 event model defines a standard set of event types, such
as click, mouseover, and keydown. This makes it easier for developers to write cross-browser
code that works consistently across different platforms.
2. Event Listeners: The DOM 2 event model provides a way to register event listeners for
specific events. This allows developers to write code that responds to user actions, such as
clicking a button or typing in a text field.
3. Event Propagation: The DOM 2 event model introduces the concept of event propagation,
which allows events to be handled at different levels of the document hierarchy. This means
that an event can be handled by an element's parent, grandparent, or even higher up in the
document tree.
4. Event Object: The DOM 2 event model provides an event object that contains information
about the event, such as the target element, the type of event, and any data associated with the
event.
There are two types of event propagation: bubbling and capturing.
1. Capturing: When an event occurs on an element, it is first handled by the top-level
element (ie, the document object), and then it "captures" the event as it propagates
down the DOM hierarchy to the element that triggered the event. Capturing is less
common than bubbling and is not supported by all browsers.
Example: Let's say that the document contains a <div> which contains a <p> which
contains an <img>. Further, let's say we have added an event listener to all of them.
When a user clicks on the image, a mouseclick event occurs. Even though the user
clicked the image, the image doesn't get the event first. Instead, the event listener
attached to the document grabs the event first and processes it. (That is, it captures the
event before it gets to its intended target <img>.) The event is then passed down to the
<div>'s event listener. The event then goes to the <p>, and finally to the <img>. That
is, all of the clicked-on object's "ancestors" higher up in the document capture the event
for processing before sending it down the chain to its intended target.
2. Bubbling: Bubbling is the most common type of event propagation. When an event
occurs on an element, it is first handled by that element, and then it "bubbles up" to its
parent element, and then to its parent's parent, and so on, until it reaches the top of the
DOM hierarchy (i.e., the document object).
Example: We have an <img> inside a <p>, which is inside a <div>, which is inside the
document. When a user clicks the image, this time the events rise like a bubble in a
glass of water. The click's original target, the <img>, gets to see the event first and it
processes, and then passes it upwards to the <p> for further processing, which passes it
on to the <div>, which finally passes it up to the document for processing.
Explain the different ways of registering an Event.
Ans:
1. Using "on" Attribute in HTML: This app he first approach for registering event
handlers in HTML is to use the "one attributed this approach is simple and
straightforward, where we can specify the name of the event and the name of the
function that will be called when the event occurs. However, this approach has some
limitations, especially for larger projects, as it can be difficult to manage and debug
code that uses this approach.
Example:
<html>
<head>
<title>Event Handling Example</title>
<style>
#message {
font-size: 20px;
margin-top: 20px;}
</style>
</head>
<body>
<h1>Event Handling Using "on" Attributes</h1>
<button Me!</button>
<p id="message">This is the original text.</p>
<script>
function changeText() {
[Link]("message").innerText = "You clicked the button!";
alert("Button was clicked!"); }
</script>
</body>
</html>
In this example, "changeText()" is the name of the function that will be executed when
the button is clicked.
2. Using DOM Event Handlers: The second approach is to use the
"addEventListener" method in JavaScript. This approach is more flexible and powerful
than using the "on" attribute in HTML. It allows to register multiple event handlers for
the same event, remove event handlers, and more.
Example: <html >
<head>
<title>Event Handling with DOM Event Handlers</title>
<style>
#message {
font-size: 20px;
margin-top: 20px; }
</style>
</head>
<body>
<h1>Event Handling Using DOM Event Handlers</h1>
<button id="myButton">Click Me!</button>
<p id="message">This is the original text.</p>
<script>
const button = [Link]("myButton");
const message = [Link]("message");
function changeText() {
[Link] = "You clicked the button!";
alert("Button was clicked!"); }
[Link]("click", changeText);
</script>
</body>
</html>
In this example, "myButton" is the ID of the button element, and "changeText" is the name of
the function that will be executed when the button is clicked
3. Using Event Handler Properties: This method involves assigning a function to the
event handler property of an HTML element. The event handler could also be
registered by the assignment to the associated event property on the button object as
shown below, For example, to add a click event handler to a button element, you can
use the following code:
Example: <html >
<head>
<title>Event Handling with Event Handler Properties</title>
<style>
#message {
font-size: 20px;
margin-top: 20px; }
</style>
</head>
<body>
<h1>Event Handling Using Event Handler Properties</h1>
<button id="myButton">Click Me!</button>
<p id="message">This is the original text.</p>
<script>
const button = [Link]("myButton");
const message = [Link]("message");
[Link] = function() {
[Link] = "You clicked the button!";
alert("Button was clicked!"); };
</script>
</body>
</html>
In this example, "myButton" is the ID of the button element, and "function" is the
name of the function that will be executed when the button is clicked.
