In this article, you will learn how to get the ID of the element that fired an event in jquery or javascript.
In this example, we used the event.target property to get the ID of the element that fired an event in jQuery. This property returns the element that triggered the event.
Here is the source code of the example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>How to Get the ID of the Element that Fired an Event in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="myDiv" style="background-color: Purple; color: white; display: block; margin-bottom: 20px; padding: 30px;">
Click on Div Element
</div>
<span id="mySpan" style="background-color: Red; color: yellow; display: block; margin-bottom: 20px; padding: 30px;">
Click on Span Element
</span>
<p id="myParagraph" style="background-color: black; color: yellow; display: block; margin-bottom: 20px; padding: 30px;">
Click on Paragraph Element
</p>
<a id="myAnchorTag" style="background-color: maroon; color: yellow; display: block; margin-bottom: 20px; padding: 30px;" href="#">
Click on anchor Tag
</a>
<!--Script to Get the Element ID that Fired an Event-->
<script>
$(document).ready(function () {
$(document).click(function (event) {
alert("You've clicked: " + event.target.nodeName + ", id: " + event.target.id);
});
});
</script>
</body>
</html>Here is the source code of the example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>How to Get the ID of the Element that Fired an Event in Javascript</title>
</head>
<body onclick="myFunction(event)">
<div id="myDiv" style="background-color: Purple; color: white; display: block; margin-bottom: 20px; padding: 30px;">
Click on Div Element
</div>
<span id="mySpan" style="background-color: Red; color: yellow; display: block; margin-bottom: 20px; padding: 30px;">
Click on Span Element
</span>
<p id="myParagraph" style="background-color: black; color: yellow; display: block; margin-bottom: 20px; padding: 30px;">
Click on Paragraph Element
</p>
<a id="myAnchorTag" style="background-color: maroon; color: yellow; display: block; margin-bottom: 20px; padding: 30px;" href="#">
Click on anchor Tag
</a>
<!--Script to Get the Element ID that Fired an Event-->
<script>
function myFunction(event) {
alert("You've clicked: " + event.target.nodeName + ", id: " + event.target.id);
}
</script>
</body>
</html>I hope this article will help you to understand how to get the ID of the element that fired an event in jquery or javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments