EVENTS - event.delegateTarget

The event.delegateTarget as the name suggests is used to get the delegate of the current element.

And what is delegate?

Say, three <p> elements and a <button> element is under a <div> element.

<div style = "background-color:green">
	<p class = "para1"> First Paragraph </p>
	<p class = "para2"> Second Paragraph </p>
	<p class = "para3"> Third Paragraph </p>

	<button> Click me </button>
</div>

Now, if we call the JQuery event using on() event and <div> element as selector,

$('div').on("click", "button", function(event)

<div> becomes the delegate of <button>.

Similarly, if we call the JQuery event using on() event and <body> element as selector,

$('body').on("click", "button", function(event)

<body> becomes the delegate of <button>.

Let us simplify with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<div style = "background-color:green">
			<p class = "para1"> First Paragraph </p>
    		<p class = "para2"> Second Paragraph </p>
    		<p class = "para3"> Third Paragraph </p>
    	
    		<button> Click me </button>
		</div>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('div').on("click", "button", function(event) { 
            	$(event.delegateTarget).css("background-color","red")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. The elements are not unknown to us. We can see that there are three <p> elements,

<p class = "para1"> First Paragraph </p>
<p class = "para2"> Second Paragraph </p>
<p class = "para3"> Third Paragraph </p>

And a <button> element,

<button> Click me </button>

Inside a <div> element,

<div style = "background-color:green">
	<p class = "para1"> First Paragraph </p>
	<p class = "para2"> Second Paragraph </p>
	<p class = "para3"> Third Paragraph </p>

	<button> Click me </button>
</div>

And in the JQuery code, we have located the <div> element. And used the on() event with it.

$('div').on("click", "button", function(event) {
	$(event.delegateTarget).css("background-color","red")
});

And as we can see, the on() event has the event (i.e. click) as first parameter, the element (i.e. button) as the second parameter and the function as the third parameter.

And if you see the function, it has event as its argument.

Note : If you are not aware of on() event, it is strongly recommended you read it.

Then in the function,

function(event) {
	$(event.delegateTarget).css("background-color","red")
}

We have called event.delegateTarget, which calls the delegate of <button> element (i.e. the <div> element).

And on <button> click, the background color of <div> changed from yellow to red.

❮❮ PREV NEXT ❯❯