jQuery event.target Property

Introduction

Return which DOM element triggered the event:

The heading, paragraph and button element have a click event defined.

Click on each element to display which element triggered the event.

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//  ww  w  . j ava2s.  co m
<script>
$(document).ready(function(){
  $("p, button, h1").click(function(event){
    $("div").html("Triggered by a " + event.target.nodeName + " element.");
  });
});
</script>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph</p>
<button>This is a button</button>
<div style="color:blue;"></div>

</body>
</html>

The event.target property returns the DOM element which triggered the event.

We can compare event.target to this to determine if the event is being handled during event bubbling.

event.target

Parameter	Optional	Description
event	Required.	The event parameter comes from the event binding function

Previous Next