Introduction

In the DOM event system, two commonly confused properties are event.target and event.currentTarget. Understanding the difference between them is essential when working with event propagation, especially during the capturing and bubbling phases.

The read-only target property of the Event interface is a reference to the object onto which the event was originally dispatched.
It differs from Event.currentTarget when the event handler is invoked during the bubbling or capturing phase.

The currentTarget property identifies the element whose event listener is currently being executed.
It always refers to the element the handler is attached to, while target may refer to a descendant element where the event originated.

Event propagation works in two phases:

Capturing phase — event travels from ancestor → descendant
Bubbling phase — event travels from descendant → ancestor

Example

<html>
<head>
  <title>event.currentTarget vs event.target</title>
</head>
<body>

<div id="a">a
  <div id="b">b
    <div id="c">c
      <div id="d">d</div>
    </div>
  </div>
</div>

<div id="w">w
  <div id="x">x
    <div id="y">y
      <div id="z">z</div>
    </div>
  </div>
</div>

<script>
  var useCapture = true;
  document.getElementById('a').addEventListener('click', clickFunc, useCapture);
  document.getElementById('b').addEventListener('click', clickFunc, useCapture);
  document.getElementById('c').addEventListener('click', clickFunc, useCapture);
  document.getElementById('d').addEventListener('click', clickFunc, useCapture);

  useCapture = false;
  document.getElementById('w').addEventListener('click', clickFunc, useCapture);
  document.getElementById('x').addEventListener('click', clickFunc, useCapture);
  document.getElementById('y').addEventListener('click', clickFunc, useCapture);
  document.getElementById('z').addEventListener('click', clickFunc, useCapture);

  function clickFunc(e) {
    var text = 'target:' + e.target.id + ', currentTarget:' + e.currentTarget.id;
    console.log(text);
  }
</script>

</body>
</html>

When clicking d (capturing phase):

target:d, currentTarget:a
target:d, currentTarget:b
target:d, currentTarget:c
target:d, currentTarget:d

When clicking z (bubbling phase):

target:z, currentTarget:z
target:z, currentTarget:y
target:z, currentTarget:x
target:z, currentTarget:w

References

blog comments powered by Disqus

Published

10 February 2023

JavaScript: event.currentTarget vs event.target

Introduction

Example

References

Published

Tags