Comparison of Event Targets

It's easy to get confused about which event target to examine when writing an event handler. This article should clarify the use of the target properties. There are five targets to consider:    Property Defined in Purpose     event.target DOM Event Interface  The DOM element on the left-hand side of the call that triggered this event.    event.currentTarget DOM Event Interface  The EventTarget whose EventListeners are currently being processed. As the event capturing and bubbling occurs, this value changes.    event.relatedTarget DOM MouseEvent Interface Identifies a secondary target for the event.   event.explicitOriginalTarget Event.webidl   Non-Standard  If the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. For example, mouse events are retargeted to their parent node when they happen over text nodes (bug 185889), and in that case .target will show the parent and .explicitOriginalTarget will show the text node.Unlike .originalTarget, .explicitOriginalTarget will never contain anonymous content.    event.originalTarget Event.webidl   Non-Standard  The original target of the event, before any retargetings. See Anonymous Content#Event_Flow_and_Targeting for details.    event.composedTarget Event.webidl   Non-Standard  The original non-native target of the event before composition from Shadow DOM.    

Use of explicitOriginalTarget and originalTarget

 Note: These properties are only available in Mozilla-based browsers. 
Examples
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Comparison of Event Targets</title>
  <style>
    table {
      border-collapse: collapse;
      height: 150px;
      width: 100%;
    }
    td {
      border: 1px solid #ccc;
      font-weight: bold;
      padding: 5px;
      min-height: 30px;
    }
    .standard {
      background-color: #99ff99;
    }
    .non-standard {
      background-color: #902D37;
    }
    </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td class="standard">Original target dispatching the event <small>event.target</small></td>
        <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
        <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
        <td class="non-standard">If there was a retargeting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargeting (never contains anonymous targets)</td>
        <td class="non-standard">If there was a retargeting of the event for some reason <small> event.originalTarget</small> contains the target before retargeting (may contain anonymous targets)</td>
      </tr>
    </thead>
    <tr>
      <td id="target"></td>
      <td id="currentTarget"></td>
      <td id="relatedTarget"></td>
      <td id="explicitOriginalTarget"></td>
      <td id="originalTarget"></td>
    </tr>
  </table>
  <p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget, and target</p>
  <script>
    function handleClicks(e) {
      document.getElementById('target').innerHTML = e.target;
      document.getElementById('currentTarget').innerHTML = e.currentTarget;
      document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
      document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
      document.getElementById('originalTarget').innerHTML = e.originalTarget;
    }

    function handleMouseover(e) {
      document.getElementById('target').innerHTML = e.target;
      document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
    }

    document.addEventListener('click', handleClicks, false);
    document.addEventListener('mouseover', handleMouseover, false);
</script>
</body>
</html>

Use of target and relatedTarget


The relatedTarget property for the mouseover event holds the node that the mouse was previously over. For the mouseout event, it holds the node that the mouse moved to.    Event type event.target event.relatedTarget     mouseover the EventTarget which the pointing device entered the EventTarget which the pointing device exited   mouseout the EventTarget which the pointing device exited the EventTarget which the pointing device entered    Example <hbox id="outer">
  <hbox id="inner"
        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
</hbox>




Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Apr 24, 2022, by MDN contributors


    
{'path': 'public/docs/dom/event/comparison_of_event_targets.html', 'source': 'DevDocs.IO'}