jQuery event.delegateTarget property is used to return the element where the currently-called jQuery event handler was attached.
Syntax:
event.delegateTargetParameters:
- event: It is a required parameter and this event parameter comes from the event binding function.
Example 1: This example shows the use of event.delegateTarget property in jQuery.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery event.delegateTarget Property
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("div").on("click", "button",
function (event) {
$(event.delegateTarget).css(
"background-color", "green");
});
});
</script>
</head>
<body>
<center>
<div>
<h1>GeeksForGeeks</h1>
<h2 id="geeks2">
jQuery event.delegateTarget Property
</h2>
<button>Click</button>
</div>
</center>
</body>
</html>
Output:
Example 2: In this example, the text size will change after clicked inside the box.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery event.delegateTarget Property
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("div").on("click", function (event) {
$(event.delegateTarget).animate({ fontSize: "+=14px"});
});
});
</script>
</head>
<body>
<center>
<div style="border: 2px solid black">
<h1>GeeksForGeeks</h1>
<h2 id="geeks2" style="color: green">
A computer science portal
</h2>
</div>
</center>
</body>
</html>
Output:
