Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Toolbar customization events

This article needs a technical review. How you can help.

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,