A common occurence in web applications are button bars that execute various commands. So I was thinking of a pattern how to make this flexible and repeatable.

Separate Event and Actions

The typical setup we find is like:

const btn = document.querySelector('#myButton');
btn.addEventListener('click', (event) => {
  event.preventPropagation();
  // Business logic goes here
  doStuff();
});

This ties the logic to a low-level event of a low level component. To increase the usefulness we need to move from "mechanical" events to business level events, kind of.

An anology: imagine a fastfood kitchen. The cook gets orders "2 burgers, large fries" that don't contain: customer tapped on the order kiosk, drive thru order or delivery request. This information iss handled by the front-desk.

Similarly we can approach the button event. Instead tying our business logic to the click event, we tie it to a higher level event.

const btn = document.querySelector('#myButton');
btn.addEventListener('click', (event) => {
  window.dispatchEvent(new CustomEvent('update-request', { detail: { button: btn }, bubbles: true, composed: true }));
});

This is oblivious where the business logic happens, while the logic still knows where it came from by inspecting the detail object. Decoupling using custom events makes testing easier.

window.addEventListener('update-request', updateStuff);
const updateStuff = async (event) => {
  await doStuff;
};

So far, so good. In the next installment I'll tie it together with a custom component.