Categories DOM, JavascriptPosted on

Difference between target & currentTarget?

Hi, this subject could be a interview question and also we need to know what is the main difference between target and currentTarget.

So, “target” is the actual thing that was clicked and “currentTarget” is where you attached the event listener to.

Let see this example:

<!DOCTYPE html>
<html>
  <head>
    <title>Cristina Rojas</title>
  </head>
  <body>
    <ul id="list">
      <li>
        <a href="#">Option 1</a>
      </li>
      <li>
        <a href="#">Option 2</a>
      </li>
    </ul>

    <script src="index.js"></script>
  </body>
</html>

Js

const ul = document.getElementById("list"); // Getting the <ul> element

// Adding an event listener to the <ul> element
ul.addEventListener("click", clickedElement);

function clickedElement(e) {
  const target = e.target;
  const currentTarget = e.currentTarget;

  console.log("target --->", target);
  console.log("currentTarget --->", currentTarget);
}

Result:

By Cristina Rojas.