Skip to main content
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. 
<div data-model="Foo">
  <input oninput="handleInput" />
  <button onclick="save">Save</button>
</div>

// 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. 
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:
AttributeEvent type
onclickMouse click
oninputInput value change
onchangeCommitted value change (blur)
onkeydownKey pressed
onsubmitForm submission
onfocusElement receives focus
onblurElement loses focus

​
Event attributes reference methods on the model

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.
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.