Back to: jQuery Tutorials
Passing Data to Event Handler in jQuery with Examples
In this article, I am going to discuss Passing Data to Event Handler in jQuery with Examples. Please read our previous article, where we discussed Binding Event Handlers using the jQuery ON Method.
jQuery event.data Property
In jQuery, we have learned that the event handler function automatically receives the event object. We have discussed a number of built-in properties on the event object. In this article, we will see the event.data property of the event object. This property helps to pass any data to the event handler function.
Syntax: We have learned the syntax of the event handler earlier using the on() method.
$(selector).on(event, childSelector, data, function, map)
This data parameter is the data in the form of an object which we want to pass to the event handler function. When we will want to use that data, we can retrieve that by event.data.
Example: Passing Data to Event Handler in jQuery
As you can see in the below code, here, we are passing an object as a parameter to the on() method. And when we are printing that on the console, we are using event.data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<h1>Passing data to the event handler</h1>
<button>Hey! You can click me</button>
<p id="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").on(
"click",
{ name: "John Doe", message: "you are beautiful" },
function (event) {
console.log(event.data);
}
);
});
</script>
</body>
</html>
Now run the above code and open the browser developer tool by pressing the F12 key and select the Console tab. Then click on the Hey! You can click me button and you should see the following logs in the Console tab as shown in the below image.
Now, these properties can also be accessed by the event.data.name and event.data.message. To prove this, modify the script section of the code as follows of the same example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").on(
"click",
{ name: "John Doe", message: "you are beautiful" },
function (event) {
$("#result").html(`Hey ${event.data.name}, ${event.data.message}`);
}
);
});
</script>
Notice we have successfully passed our custom data to the event handler function. Now, run the code and then click on the Hey! You can click me button and you should get the message as shown in the below image.
Example: Passing Data to Event Handler in jQuery
In this example, we are passing an object inside the on() method. When you will click on each paragraph you can see the message we are passing through the data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
width: 70%;
padding: 20px;
margin: 30px;
border-radius: 30px;
background-color: rgb(255, 164, 164);
cursor: pointer;
}
button {
background-color: #1c4450;
border: none;
color: white;
padding: 20px 35px;
text-align: center;
text-decoration: none;
outline: none;
display: inline-block;
font-size: 20px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
}
</style>
</head>
<body>
<h1>Passing data to the event handler</h1>
<p>This is a dummy paragraph</p>
<p>This is a dummy paragraph</p>
<p>This is a dummy paragraph</p>
<p>This is a dummy paragraph</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("p").each(function (index) {
$(this).on(
"click",
{ message: `This is the paragraph indexed at ${index}` },
function (event) {
$(this).append("</br>" + event.data.message);
}
);
});
});
</script>
</body>
</html>
Now run the above code and you will get the following output.
Now click on each paragraph and you will get the following output.
In the next article, I am going to discuss How to Add Event Handlers to Dynamically Created Elements in jQuery with Examples. Here, in this article, I try to explain Passing data to the event handler in jQuery with Examples and I hope you enjoy this Passing data to the event handler in the jQuery article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.