Decoupling lets code signal that something happened without knowing who will respond—or whether anyone will. DOM event handlers demonstrate this: handlers can respond independently to the same event. section 13.3.2
Custom events keep shared code from depending on page-specific callbacks:
- A global-function approach requires shared code and page code to agree on a function name; custom events let interested code subscribe independently. section 13.3.2
- Multiple handlers can react independently, and custom events can carry details for listeners. section 13.3.2
An operation signals its progress
An AJAX operation dispatches start and completion events; separate listeners show and hide a spinner, and the start event can include a URL. section 13.3.2
button.addEventListener('click', () => {
performAjaxOperation();
});
document.addEventListener('ajax-start', e => {
document.getElementById('whirlyThing').style.display = 'inline-block';
assert(e.detail.url === 'my-url', 'We can pass in event data');
});
document.addEventListener('ajax-complete', e => {
document.getElementById('whirlyThing').style.display = 'none';
});
See the listeners that respond to the AJAX events and read data from the start event. section 13.3.2
