EVENTS - event.currentTarget

The event.currentTarget is used to get the current element. It can be said to be equal to this.

Let us simplify with the below example.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	<p class = "para2"> Second Paragraph </p>
    	<p class = "para3"> Third Paragraph </p>
    	
    	<button> Click me </button>

      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$(event.currentTarget).text("The contents of current element got replaced")
            });
            
      	</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 we have a <button> element,

<button> Click me </button>

And on <button> click, the click() event gets triggered,

$('button').click(...);

Which in turn triggers the anonymous function,

function() {
	$(event.currentTarget).text("The contents of current element got replaced")
}

Now, inside the anonymous function, we can see that the event.currentTarget,

$(event.currentTarget).text("The contents of current element got replaced")

Locates the current element i.e. <button>.

And why is <button> the current element?

Because only when we have clicked the <button>, the JQuery statement is triggered.

And if you see the output, the content of the <button> is changed from Click me to The contents of current element got replaced.

NEXT ❯❯