event.target

  • Revision slug: DOM/event.target
  • Revision title: event.target
  • Revision id: 78161
  • Created:
  • Creator: dbruant
  • Is current revision? No
  • Comment 136 words added, 336 words removed

Revision Content

{{ DomRef() }}

Summary

This property of event objects is the object the event was dipatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

Example

The event.target property can be used in order to implement event delegation.

// Assuming there is a 'list' variable containing an instance of an HTML ul element.
function hide(e){
  // Unless elements in the list are separated by a margin, e.target should be different than e.currentTarget
  e.target.style.visibility = 'hidden';
}

list.addEventListener('click', hide, false);

// If some element (
  • element or a link within an
  • element for instance) is clicked, it will disappear. // It only requires a single listener to do that
  • Specification

    DOM Level 2 Events: Event.target

    {{ languages( { "pl": "pl/DOM/event.target" } ) }}

    See also

    Comparison of Event Targets

    Revision Source

    <p>{{ DomRef() }}</p>
    <h2 name="Summary">Summary</h2>
    <p>This property of event objects is the object the event was dipatched on. It is different than <code>event.currentTarget</code> when the event handler is called in bubbling or capturing phase of the event.</p> <h2 name="Example">Example</h2>
    <p>The <code>event.target</code> property can be used in order to implement <strong>event delegation</strong>.</p>
    <pre class="brush: js">// Assuming there is a 'list' variable containing an instance of an HTML ul element.
    function hide(e){
      // Unless elements in the list are separated by a margin, e.target should be different than e.currentTarget
      e.target.style.visibility = 'hidden';
    }
    
    list.addEventListener('click', hide, false);
    
    // If some element (<li> element or a link within an </li><li> element for instance) is clicked, it will disappear.
    // It only requires a single listener to do that
    </li></pre>
    <h2 name="Specification">Specification</h2>
    <p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-target">DOM Level 2 Events: Event.target</a></p>
    <p>{{ languages( { "pl": "pl/DOM/event.target" } ) }}</p> <h2>See also</h2> <p><a href="/en/DOM/event/Comparison_of_Event_Targets" title="en/DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p>
    Revert to this revision