Event.delegateTarget method in jQuery

The delegateTarget method is applied as an event property on the main element that is selected. It is usually used with the on() function, whose selected element is the one on whom the property is applied.

In the following example we have a button inside a div. We select the div and apply the on function, clicking on the button inside creates a function where the delegateTarget method is applied, which delegates the css method on the div selected at the beginning.

<div id="main">
  <button>CLICK</button>
</div>
<!--Script jQuery-->
<script>
  $(document).ready(function () {
    $("#main").on( "click", "button", function( event ) {
      $(event.delegateTarget).css({'padding': '10px', 'background-color': 'red'});
    });
  });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>