HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eventPhase AT_TARGET</title>
  <style>
    #box {
      width: 160px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e0f2fe;
      border: 2px solid #0284c7;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <div id="box">Click me</div>
  <pre id="out">Waiting...</pre>
  <script>
    var box = document.getElementById("box");
    var out = document.getElementById("out");

    box.addEventListener("click", function (event) {
      box.style.outline = "";
      if (event.eventPhase === Event.AT_TARGET) {
        event.currentTarget.style.outline = "3px solid tomato";
      }
      out.textContent =
        "phase = " + event.eventPhase +
        " (AT_TARGET = " + Event.AT_TARGET + ")";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Event.eventPhase — AT_TARGET highlight (Try It)