> ## Documentation Index
> Fetch the complete documentation index at: https://sprincul.sinfullycoded.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Event Handling in Sprincul with Native HTML Attributes

> Sprincul converts standard onclick, oninput, and other native event attributes into proper DOM event listeners wired to your model's methods.

Sprincul handles events using the same `on<event>` attributes you already know from HTML — `onclick`, `oninput`, `onchange`, `onkeydown`, and any other standard event attribute. The difference is that instead of writing inline JavaScript, you provide the name of a method on your model class. Sprincul converts the attribute into a real event listener and removes it from the DOM.

## How it works

When `Sprincul.init()` processes a model container, it scans every element inside for `on<event>` attributes. For each one it finds, it:

1. Reads the attribute value as a method name on your model instance.
2. Removes the inline attribute from the element so it does not appear in the rendered DOM.
3. Adds a real `addEventListener` call that invokes your method when the event fires.
4. Passes the native `Event` object to your handler as the first argument.

This means there is no inline JavaScript evaluation, no `eval`, and no security concerns from executing strings as code. The behavior lives entirely in your model class.

## Writing event handlers

Declare your event handler as a method on your model class. Sprincul wires it up automatically — you do not need to call `addEventListener` yourself.

```html theme={null}
<div data-model="Foo">
  <input oninput="handleInput" />
  <button onclick="save">Save</button>
</div>
```

```js theme={null}
// Foo.js
import { SprinculModel } from 'sprincul';

export default class Foo extends SprinculModel {
  /** @param {InputEvent} e */
  handleInput(e) {
    // e is the native Event object
    console.log(e.target.value);
  }

  save() {
    // Triggered when the button is clicked
  }
}
```

The method names in HTML must match exactly what you define on the class. Sprincul uses `Reflect.get` to look up the method by name, so spelling and capitalization both matter.

## The native Event object

Your handler receives the native browser `Event` object (or a subclass like `InputEvent`, `MouseEvent`, etc.) as its first argument. You can read `e.target`, `e.currentTarget`, call `e.preventDefault()`, and use any other standard event API.

```js theme={null}
export default class SearchBox extends SprinculModel {
  /** @param {KeyboardEvent} e */
  handleKeydown(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      this.submitSearch();
    }
  }

  submitSearch() {
    // ...
  }
}
```

## Supported event attributes

Any standard `on<event>` attribute is supported. Common examples include:

| Attribute   | Event type                    |
| ----------- | ----------------------------- |
| `onclick`   | Mouse click                   |
| `oninput`   | Input value change            |
| `onchange`  | Committed value change (blur) |
| `onkeydown` | Key pressed                   |
| `onsubmit`  | Form submission               |
| `onfocus`   | Element receives focus        |
| `onblur`    | Element loses focus           |

## Event attributes reference methods on the model

<Warning>
  The attribute value must be the name of a method that exists on your model class. If Sprincul cannot find the method at initialization time, the event listener is not attached and — in `devMode` — a console warning is emitted. Double-check spelling and make sure the method is defined on the class, not just on a parent.
</Warning>

<Note>
  Sprincul removes `on<event>` attributes from the DOM after wiring the listener. This means the raw handler name will not be visible in the rendered HTML, which is the expected behavior.
</Note>