• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Vanilla JS
    2. React
Guides Event handling
(external link)

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} />
}
React usually triggers event handlers set with the onChange prop differently than browsers actually handle change events. Event handlers set with the onChange prop usually are invoked everytime the element's value changes in React, while by definition the change event is only dispatched after the element loses focus.

Liquid Oxygen components stick to that browser default behavior and only dispatch the ldchange/change events after an element loses focus. Thus, you cannot expect an event handler set neither via onLdchange nor onChange to be invoked everytime the value changes. If you want that, the input event is exactly what you're looking for, so please use the onInput prop in these cases, instead. (There is no custom ldinput event, as the input event is a composed native event that bubbles into the light DOM.)