Custom events

Custom events

You can add event listeners like onclick and onfocus using maquette using the following notation.

  h('div', { onclick: handleClick, onfocus: () => { focused = true; } }, ['Click me']);

But what if you are using custom elements that trigger events like sl-expand or sl-collapse? Since maquette 4.0 you can now use the following notation:

  h('sl-tree', { on: { 'sl-expand': handleExpand, 'sl-collapse': handleCollapse } }, []);

The on notation also allows configuring event handlers to be passive or handle events during the capture phase.

  h('div', { on: { scroll: { listener: handleScroll, options: { passive: true, capture: true } } } }, []);


This example demonstrates how to use the on notation to listen to custom events.