Event handling #

Liquid Oxygen aims to stick to the browser standards where possible. That is why we try to use as few custom events as possible. This is especially the case for components that are mainly meant to just "skin" native HTML elements with a Liquid Oxygen look, like ld-input. But Web Components are a bit tricky here: There are many events, especially the ones that are the result of a direct user interaction, like click, focusin/focusout that bubble just fine from inside a Web Component's shadow DOM into the light DOM. But others, like the change event, don't. The difference between those events is that the former are defined as composed events, while the latter are not.

We try to dispatch non-composed events by manually creating them on the Web Component's host elements, but they do not behave 1:1 like their native equivalents. This results in unexpected behavior, for example React "swallowing" change events that are created in such a way and event handlers set with the onChange prop not being invoked.

Because of that, Liquid Oxygen components dispatch custom events that are named like the native events they are meant to replace, but prefixed with "ld". So form components like ld-input, for example, dispatch an ldchange event. Which custom events are available is documented in the "Events" section of each component's documentation page.

Examples #

These examples show how to use the custom "ld"-prefixed events with Vanilla JS and React.

Vanilla JS #

<ld-input id="example" />

<script>
const handleLdchange = () => {
  console.log('changed!')
}

document.getElementById("example").addEventListener('ldchange', handleLdchange)
</script>

React #

const MyApp = () => {
  const handleLdchange = React.useCallback(() => {
    console.log('changed!')
  }, [])

  return <LdInput onLdchange={handleLdchange} />
}