Triggers | html★

Control when requests are made with various trigger events in html★.

Default Triggers

html★ uses sensible defaults based on element type:

Element	Default Trigger
`<a>`	click
`<button>`	click
`<form>`	submit

Custom Triggers

Use data-trigger to specify a different trigger:

Trigger	When it fires	Use Case
`click`	Element is clicked	Buttons, links
`submit`	Form is submitted	Forms
`change`	Value changes (blur)	Selects, checkboxes
`input`	Value changes (debounced)	Search inputs
`visible`	Element enters viewport	Infinite scroll
`load`	Immediately on init	Load on page load

Examples

Live Search (input)

Fires on each keystroke, debounced by 300ms (configurable).

Filter Select (change)

Infinite Scroll (visible)

Uses IntersectionObserver. Fires once when element becomes visible.

Load on Init (load)

Fires immediately when html★ initializes.

Instant Navigation

Add data-instant to trigger navigation on mousedown instead of click, making it feel ~100ms faster:

data-instant inherits through the cascade, so setting it on a parent applies to all links within. Only left-clicks are handled — right-click and middle-click work normally.

Including Values

Use data-include to include input values in the request:

For GET requests, included values are appended as query parameters. For POST/PUT/PATCH, they're added to the FormData body. Each included element must have a name attribute.

Custom Request Headers

Use data-headers to send additional HTTP headers as a JSON object:

Headers are merged with html★'s default headers (X-Requested-With: htmlstar).

Trigger Modifiers

Append modifiers after the event type (space-separated) to control timing and execution:

Debounce

Delay execution until input stops for the specified duration:

Default is 300ms if no value is specified: data-trigger="input debounce".

Throttle

Limit execution to at most once per interval:

Default is 300ms if no value is specified.

Delay

Wait a fixed duration before executing:

Once

Fire only once, then stop listening:

Combining Modifiers

Modifiers can be combined:

Modifier	Syntax	Default	Description
`debounce`	`debounce:500`	300ms	Wait for input to stop
`throttle`	`throttle:200`	300ms	Rate-limit execution
`delay`	`delay:100`	—	Fixed delay before execution
`once`	`once`	—	Fire only once

Debounce Configuration

You can also configure debounce globally or via data attributes as an alternative to inline modifiers:

Inline modifiers (data-trigger="input debounce:500") take precedence over data-debounce and meta tag configuration.

Warning: data-trigger does NOT inherit from ancestors. Each element must specify its own trigger if it differs from the default.