mozilla
Your Search Results

    Event.target

    Summary

    A reference to the object that dispatched the event. It is different than event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

    Syntax

    theTarget = event.target

    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 list items 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> element for instance) is clicked, it will disappear.
    // It only requires a single listener to do that
    

    Browser compatibility

    On IE6-8, the event model is different. Event listeners are attached with the non-standard element.attachEvent() method. In this model, the event object has an srcElement property, instead of the target property, and it has the same semantics as event.target.

    function hide(e) {
      // Support IE6-8
      var target = e.target || e.srcElement;
      target.style.visibility = 'hidden';
    }
    

    Specification

    DOM Level 2 Events: Event.target

    See also

    Comparison of Event Targets

    Document Tags and Contributors

    Last updated by: fscholz,