Events

Handle user interactions with lv-* attributes — no JavaScript required.

Click Events

template.html
<!-- Basic click -->
<button lv-click="increment">+1</button>

<!-- With confirmation -->
<button lv-click="delete" lv-confirm="Are you sure?">Delete</button>

<!-- Disable during processing -->
<button lv-click="save" lv-disable-with="Saving...">Save</button>

Form Events

form.html
<!-- Form submission -->
<form lv-submit="save_user">
    <input name="email" type="email" required />
    <input name="password" type="password" required />
    <button type="submit">Sign Up</button>
</form>

<!-- Form with live validation -->
<form lv-submit="create" lv-change="validate">
    <input name="username" />
    <span class="error">{{ .Errors.username }}</span>
    <button type="submit">Create</button>
</form>

Input Events

input.html
<!-- Change event (fires on blur) -->
<input lv-change="validate_email" name="email" />

<!-- Input event (fires on every keystroke) -->
<input lv-input="search" name="query" placeholder="Search..." />

<!-- Focus events -->
<input lv-focus="show_suggestions" lv-blur="hide_suggestions" />

<!-- Key events -->
<input lv-keydown="handle_key" lv-key="Enter" />

Passing Values

values.html
<!-- Single value -->
<button lv-click="select" lv-value-id="123">Select Item</button>

<!-- Multiple values -->
<button lv-click="action"
        lv-value-id="123"
        lv-value-type="delete"
        lv-value-confirm="true">
    Delete
</button>

<!-- Dynamic values from elements -->
<tr lv-click="select_row" lv-value-row-id="{{ .ID }}">
    <td>{{ .Name }}</td>
</tr>

Debounce & Throttle

debounce.html
<!-- Debounce: wait 300ms after last keystroke -->
<input lv-input="search" lv-debounce="300" />

<!-- Throttle: fire at most once per 500ms -->
<div lv-scroll="load_more" lv-throttle="500"></div>

<!-- Blur debounce (validate on field exit) -->
<input lv-change="validate" lv-debounce="blur" />

Handling Events in Go

handler.go
func (c *MyComponent) HandleEvent(ctx context.Context, event string, payload map[string]any) error {
    switch event {
    case "increment":
        c.Count++

    case "select":
        // Get value from lv-value-id
        id := payload["id"].(string)
        c.SelectedID = id

    case "save_user":
        // Form data comes in payload
        email := payload["email"].(string)
        password := payload["password"].(string)
        // Process form...

    case "search":
        // Input value comes as "value"
        query := payload["value"].(string)
        c.Results = c.search(query)

    case "handle_key":
        // Key info in payload
        key := payload["key"].(string)
        if key == "Enter" {
            c.submit()
        }
    }
    return nil
}

JavaScript Hooks

For advanced client-side behavior:

hooks.html + hooks.js
<!-- HTML -->
<div lv-hook="Chart" data-values="[10,20,30,40]"></div>

// JavaScript
GoliveKit.hooks.Chart = {
    mounted() {
        const data = JSON.parse(this.el.dataset.values)
        this.chart = new Chart(this.el, { data })
    },
    updated() {
        const data = JSON.parse(this.el.dataset.values)
        this.chart.update(data)
    },
    destroyed() {
        this.chart.destroy()
    }
}