jQuery event.delegateTarget()

.event.delegateTarget()

The element where the currently-called jQuery event handler was attached.

This property is most often useful in delegated events attached by .delegate() or .on(), where the event handler is attached at an ancestor of the element being processed. It can be used, for example, to identify and remove event handlers at the delegation point.

For non-delegated event handlers attached directly to an element, event.delegateTarget will always be equal to event.currentTarget.

Example : When a button in any box class is clicked, change the box's background color to red.

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>

<script>
$( ".box" ).on( "click", "button", function( event ) {
  $( event.delegateTarget ).css( "background-color", "red" );
});
</script>
</body>
</html>