Events (Lightweight templates)

For Lightweight templates, you can use a new API to subscribe to events. Previously, to subscribe to button-click events, you had to take an element from the DOM, register an event subscription, and then unsubscribe if the element is removed from the DOM.

Old way:

HTML


<div id="elementId">html element</div>

<custom-script>
  const elementVariable = document.querySelector('#elementId');
  elementVariable.addEventListener('click', clickHandler);

  const clickHandler = (event) => {
    // handler logic
  }

  // and if this element is destroyed in the future, you need to remove the listener.
  elementVariable.removeEventListener('click', clickHandler);
</custom-script>

New way:

HTML


<div id="elementId" onClick={clickHandler}>html element</div>

// JS tab
const clickHandler = (event) => {
  // handler logic
}

In the new way, you don't need to unsubscribe from the event.

Most Commonly Used Events

onClick — Click handler
onInput — Input value changes
onChange — Form element changes
onSubmit — Form submission
onKeyDown — Key press handling
onMouseEnter / onMouseLeave — Hover effects
onFocus / onBlur — Focus management

List of All Events

Category	JSX Handler	Underlying DOM Event(s)
Mouse	`onClick`	`click`
	`onDoubleClick`	`dblclick`
	`onContextMenu`	`contextmenu`
	`onMouseDown`	`mousedown`
	`onMouseMove`	`mousemove`
	`onMouseUp`	`mouseup`
	`onMouseOver`	`mouseover`
	`onMouseOut`	`mouseout`
	`onMouseEnter`	`mouseenter`
	`onMouseLeave`	`mouseleave`
Wheel/Scroll	`onWheel`	`wheel`
Wheel/Scroll	`onScroll`	`scroll`
Form	`onChange`	`change`
	`onInput`	`input`
	`onSubmit`	`submit`
	`onReset`	`reset`
	`onBeforeInput`	`beforeinput`
	`onSelect`	`select`
Keyboard	`onKeyDown`	`keydown`
	`onKeyUp`	`keyup`
	`onKeyPress`	`keypress`
Focus	`onFocus`	`focusin`
	`onBlur`	`focusout`
	`onFocusIn`	`focusin`
	`onFocusOut`	`focusout`
Drag	`onDrag`	`drag`
	`onDragEnd`	`dragend`
	`onDragEnter`	`dragenter`
	`onDragLeave`	`dragleave`
	`onDragOver`	`dragover`
	`onDragStart`	`dragstart`
	`onDrop`	`drop`
Touch	`onTouchStart`	`touchstart`
	`onTouchMove`	`touchmove`
	`onTouchEnd`	`touchend`
	`onTouchCancel`	`touchcancel`
Pointer	`onPointerDown`	`pointerdown`
	`onPointerMove`	`pointermove`
	`onPointerUp`	`pointerup`
	`onPointerOver`	`pointerover`
	`onPointerOut`	`pointerout`
	`onPointerEnter`	`pointerenter`
	`onPointerLeave`	`pointerleave`
	`onPointerCancel`	`pointercancel`
Media	`onLoadStart`	`loadstart`
	`onProgress`	`progress`
	`onLoadedData`	`loadeddata`
	`onLoadedMetadata`	`loadedmetadata`
	`onCanPlay`	`canplay`
	`onCanPlayThrough`	`canplaythrough`
	`onEnded`	`ended`
	`onWaiting`	`waiting`
	`onPlaying`	`playing`
	`onSeeking`	`seeking`
	`onSeeked`	`seeked`
	`onStalled`	`stalled`
	`onSuspend`	`suspend`
	`onAbort`	`abort`
	`onError`	`error`
	`onEmptied`	`emptied`
	`onDurationChange`	`durationchange`
	`onTimeUpdate`	`timeupdate`
	`onVolumeChange`	`volumechange`
	`onRateChange`	`ratechange`
Other	`onLoad`	`load`
	`onError`	`error`
	`onCopy`	`copy`
	`onCut`	`cut`
	`onPaste`	`paste`

Last updated: July 07, 2026