Event handler

EVENT HANDLER IN JAVASCRIPT
The change in the state of an object is known as an Event. In html, there are various events which
represents that some activity is performed by the user or by the browser. When java script code is
included in HTML, js react over these events and allow the execution. This process of reacting over
the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute the task to be
performed on the event.
Event handlers are functions that are executed in response to specific events that occur in the
browser, such as user interactions like clicks, key presses, or mouse movements. In JavaScript, event
handling is a crucial part of creating interactive web applications.
Types of Event Handlers:
There are two primary ways to attach event handlers in JavaScript:
 Inline Event Handlers: These are defined directly in the HTML elements using attributes.
 DOM Event Listeners: These are added using JavaScript methods to attach events to
elements.
1. Inline Event Handlers
This method adds the event handler directly within the HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Inline Event Handler</title>
<script>
function handleClick () {
alert ('Button clicked!');
}
</script>
</head>
<body>
<button onclick="handleClick ()">Click Me! </button>
</body>
</html>
2.Using addEventListener (DOM)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Event Listener</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked using addEventListener!');
});
});
</script>
</head>
<body>
<button id="myButton">Click Me!</button>
</body>
</html>
Event Types:
1. Mouse Events
o click: Triggered when an element is clicked.
o dblclick: Triggered when an element is double-clicked.
o mouseover: Triggered when the mouse pointer moves over an element.
o mouseout: Triggered when the mouse pointer moves out of an element.
2. Keyboard Events
o keydown: Triggered when a key is pressed down.
o keyup: Triggered when a key is released.
o keypress: Triggered when a key is pressed (not reliable for all keys).
3. Form Events
o submit: Triggered when a form is submitted.
o change: Triggered when an input value is changed.
o focus: Triggered when an element gains focus.
o blur: Triggered when an element loses focus.
4. Window Events
o load: Triggered when the page finishes loading.
o resize: Triggered when the window is resized.
o scroll: Triggered when the page is scrolled.
Examples of Events
1.Mouse Event Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mouse Events</title>
<script>
function handleMouseOver(event) {
event.target.classList.add('highlight');
}
function handleMouseOut(event) {
event.target.classList.remove('highlight');
}
</script>
</head>
<body>
<div class="box" onmouseover="handleMouseOver(event)"
onmouseout="handleMouseOut(event)"></div>
</body>
</html>
2.Keyboard Event Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Keyboard Events</title>
<script>
function handleKeyDown(event) {
alert('Key down: ' + event.key);
}
function handleKeyUp(event) {
alert('Key up: ' + event.key);
}
</script>
</head>
<body>
<input type="text" onkeydown="handleKeyDown(event)"
onkeyup="handleKeyUp(event)" placeholder="Type something...">
</body>
</html>
3. Form Event Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Events</title>
<script>
function handleSubmit(event) {
event.preventDefault();
alert('Form submitted!');
}
function handleChange(event) {
alert('Value changed: ' + event.target.value);
}
</script>
</head>
<body>
<form onsubmit="handleSubmit(event)">
<input type="text" onchange="handleChange(event)"
placeholder="Enter text">
<button type="submit">Submit</button>
</form>
</body>
</html>
4. Window Event Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Window Events</title>
<script>
window.addEventListener('load', function() {
alert('Window loaded!');
});
window.addEventListener('resize', function() {
alert('Window resized!');
});
</script>
</head>
<body>
<p>Resize the window to see the event in action.</p>
</body>
</html>

Event handler

Uploaded by

Copyright:

Available Formats

Event handler

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Event handler

Uploaded by

Copyright:

Available Formats

EVENT HANDLER IN JAVASCRIPT

Types of Event Handlers:

There are two primary ways to attach event handlers in JavaScript:

1. Inline Event Handlers

1.Mouse Event Example:

2.Keyboard Event Example:

4. Window Event Example:

You might also like