Events
data-on:EVENT handles DOM events. data-on-interval runs on a timer. data-on-intersect fires on viewport entry.
datastar ds-events
Usage
// Basic click
data-on:click="$open=!$open"
// Input with 300ms debounce (fires 300ms after typing stops)
data-on:input__debounce.300ms="@get('/api/search')"
// Keyboard shortcut on the window (not just the element)
data-on:keydown__window="if(evt.key==='Escape')$open=false"
// Outside-click to close a dropdown
data-on:click__window="$ddOpen=false"
data-on:click__stop="$ddOpen=!$ddOpen" // stop propagation on trigger
// Interval timer — runs expression every N ms
data-on-interval__duration.1s="$ticks++"
// Intersection observer — fires when element enters viewport
data-on-intersect="$visible=true"
// Once modifier — handler fires exactly once
data-on:click__once="$welcomed=true"