v140 · dom

ToggleEvent source attribute

The source attribute of ToggleEvents contains the element which triggered the ToggleEvent to be fired, if applicable. For example, if a button element with the popovertarget or commandfor attribute set up to open a popover is clicked by the user, then the ToggleEvent fired on the popover will have its source attribute set to the invoking button.

concepts

  1. ToggleEvent.source

    ToggleEvent gains a source attribute pointing at the triggering element. Lets popover/details listeners know who flipped the state without bookkeeping their own map.

  2. Invoker Trace

    Three different buttons opening the same popover. The toggle log records the source for every open/close — including the null source for Esc / light-dismiss.

  3. Details Tree

    Nested <details> tree with a single delegated toggle listener. event.source distinguishes a user click from a programmatic open.

  4. Analytics Router

    Real popover with three openers — header button, context menu, auto-popup. The analytics router uses event.source to skip the auto-popup and tag user-driven opens by ID.

  5. Input Method Comparison

    Three <details> elements opened by mouse click, keyboard (Tab + Enter), and programmatically. Toggle event log shows e.source for each — pointer / keyboard / programmatic / none — with color-coded badges. Stats panel counts the source breakdown over 20 events, and a "source-aware handler" code snippet shows how to skip analytics for programmatic opens.

why it shipped

The source attribute of ToggleEvents contains the element which triggered the ToggleEvent to be fired, if applicable. For example, if a button element with the popovertarget or commandfor attribute set up to open a popover is clicked by the user, then the ToggleEvent fired on the popover will have its source attribute set to the invoking button.

references