jQuery | event.target Property with Example
The event.target is an inbuilt property in jQuery which is used to find which DOM element will start the event.
Syntax:
event.target
Parameter: It does not accept any parameter because it is a property not a function.
Return Value: It returns which DOM element triggered the event.
jQuery code to show the working of event.target Property property:
<html> <head> <style> span, strong, p { padding: 8px; display: block; border: 2px solid green; width: 50%; margin: 10px; } #output { margin: 10px; padding: 10px; width: 100px; border: 2px solid green; display: block; } </style> </script></head> <body> <div> <p> <strong><span>click Here !</span></strong> </p> </div> <!-- output will show inside this block --> <div id="output"></div> <!-- jQuery code to show working of this property --> <script> $("body").click(function(event) { $("#output").html("clicked: " + event.target.nodeName); }); </script></body> </html> |
Output:
Before clicking anywhere-
After clicking inside of the p element-
After clicking inside of the STRONG element-
After clicking inside of the SPAN element-
.png)
.png)