Tip: Handling JavaScript Focus Without Page Scrolling or Repositioning

Tip: Handling JavaScript Focus Without Page Scrolling or Repositioning by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8972 **1. Where The Problem Comes From** Sometimes we want the page not to scroll when an element receives focus. For example, when we click a button...

Code: Dispatching a CustomEvent

const event = new CustomEvent('show', {
  detail: { message: payload, sentAt: new Date().toLocaleTimeString() }
});

window.dispatchEvent(event);
Result
Waiting for an event...

Code: Listening for the Event Payload

window.addEventListener('show', (event) => {
  render(event.detail.message, event.detail.sentAt);
});
Event log
No events yet.