Events & Actions

Attach event listeners declaratively with ly-on:<event>. Handlers invoke action methods or inline expressions safely.

Basic usage

Bind any DOM event using ly-on:<event>="action()".

<div>
    <script>
        const app = Lyap.scope('app');
        app.state({ count: 0 });
        app.actions({
            save() {
                console.log('Saved!');
            },
            increment() {
                this.count++;
            }
        });
    </script>

    <button ly-on:click="app.save()">Save Profile</button>
    <button ly-on:click="app.increment()">Increase</button>
</div>

Event modifiers

Append modifiers after a dot in the event name:

Modifier	Purpose
.prevent	Calls event.preventDefault().
.stop	Calls event.stopPropagation().
.self	Runs handler only if event.target === element.
.once	Removes the listener after its first invocation.
.capture	Registers the listener in capture mode.
.passive	Registers the listener as passive.

Self and prevent

<!-- Modal backdrop: only clicks on backdrop itself trigger handler -->
<div class="modal-backdrop" ly-on:click.self="modal.close()">
    <div class="modal-card">Content</div>
</div>

<!-- Prevent default form submission -->
<form ly-on:submit.prevent="profile.handleSubmit()">
    <button type="submit">Submit</button>
</form>