Hello Readers,
Definition: The DOM(Document Object Model) element that initiated the event.
It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling.
The target property can be the element that registered for the event or a descendant of it. It is often useful to compare event.target to this in order to determine if the event is being handled due to event bubbling. This property is very useful in event delegation, when events bubble.
Syntax: event.target
Examples 1: Display the tag's name on click event.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo event.target</title>
<style type="text/css">
.event-span, .event-strong, .event-p { padding: 8px; display: block; border: 1px solid #999; }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="set">
<div id="log"></div>
<div>
<p class="event-p"><strong class="event-strong"><span class="event-span">Click Here</span></strong></p>
</div>
</div>
<script type="text/javascript">
$( ".set" ).click(function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>
</body>
</html>
Examples 2: Display the background color on click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "ul" ).click(function( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.css( "background-color", "#c00" );
}
});
});
</script>
</head>
<body>
<ul>
<li>list item 1 - tag</li>
<li>list item 2 - tag</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</body>
</html>
Thanks
0 Comment(s)