Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to pass event objects from one function to another in JavaScript?
In JavaScript, event objects contain information about user interactions like clicks, key presses, or mouse movements. You can pass these event objects between functions to share event data and manipulate the same target element across multiple functions.
Syntax
// Function that receives event and passes it to another
function firstFunction(event) {
// Do something with event
secondFunction(event); // Pass event to another function
}
function secondFunction(event) {
// Use the same event object
event.target.style.property = "value";
}
Example: Passing Event Between Functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Passing Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.btn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Pass Event Objects Between Functions</h1>
<button class="btn" onclick="changeFont(event)">CLICK HERE</button>
<h3>Click the button to change its font size and color</h3>
<script>
function changeFont(event) {
console.log("First function: changing font size");
event.target.style.fontSize = "24px";
// Pass the same event object to another function
changeColor(event);
}
function changeColor(event) {
console.log("Second function: changing color");
event.target.style.color = "red";
// Pass to a third function
addBorder(event);
}
function addBorder(event) {
console.log("Third function: adding border");
event.target.style.border = "2px solid blue";
}
</script>
</body>
</html>
How It Works
When you pass an event object between functions:
- event.target - References the element that triggered the event
- Same object - All functions receive the exact same event object
- Chaining - Functions can call other functions, passing the event along
Practical Example: Form Validation
<!DOCTYPE html>
<html>
<head>
<title>Event Passing in Forms</title>
</head>
<body>
<input type="text" placeholder="Enter your name" onblur="validateInput(event)">
<div id="message"></div>
<script>
function validateInput(event) {
const value = event.target.value;
if (value.length < 3) {
showError(event, "Name must be at least 3 characters");
} else {
showSuccess(event, "Valid name entered");
}
}
function showError(event, message) {
event.target.style.border = "2px solid red";
displayMessage(event, message, "red");
}
function showSuccess(event, message) {
event.target.style.border = "2px solid green";
displayMessage(event, message, "green");
}
function displayMessage(event, text, color) {
const messageDiv = document.getElementById("message");
messageDiv.textContent = text;
messageDiv.style.color = color;
}
</script>
</body>
</html>
Key Points
- Event objects are passed by reference, not copied
- Multiple functions can modify the same target element
- Useful for separating concerns in event handling
- Enables modular and reusable event handling code
Conclusion
Passing event objects between functions allows you to create modular, organized code where different functions handle specific aspects of an event. This approach promotes code reusability and separation of concerns in your JavaScript applications.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements