mozilla
Your Search Results

    Toolbar customization events

    This article is in need of a technical review.

    When toolbars are customized, events are sent to their parent window. You can use window.addEventListener() to listen for these events in order to keep abreast of changes to toolbars.

    None of these events contain any data; if you need details, you'll need to look at the toolbar.

    beforecustomization
    This event is delivered when the user starts the toolbar customization process; for example, by right-clicking on a toolbar and choosing "Customize".
    customizationchange
    This event is delivered when the user makes a change to a toolbar while editing the toolbars, either by dragging an item to the toolbar or by dragging an item out of it.
    aftercustomization
    This event is delivered when the user closes the toolbar customization panel.

    In all cases, the event.target is the toolbox being customized. You can look at the contents of that element and its children to determine what changes were made.

    Example

    In this example, we watch for toolbar changes.

    window.addEventListener("beforecustomization", customizeStart, false);
    window.addEventListener("aftercustomization", customizeEnd, false);
    window.addEventListener("customizationchange", customizeChange, false);
    
    function customizeStart(e) {
      let theToolbox = e.target;
      /* now we know the user has started customizing */
    }
    
    function customizeEnd(e) {
      let theToolbox = e.target;
      /* the user has finished customizing */
    }
    
    function customizeChange(e) {
      let theToolbox = e.target;
      /* the user has made a change to the toolbox */
    }
    

    Document Tags and Contributors

    Tags: 
    Contributors to this page: Sheppy, mconley
    Last updated by: Sheppy,