Toolbar customization events

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 */
}