on:*

Event actions can be defined on any element with the following pattern:

on:<event>="hello KEML"

This is not an event handler in the traditional sense, because it does not imply any work being done.

This reads like the following:

• define hello and KEML as actions of type event
• assign them to the output channel of <event>

---

Event actions can then be used with the following pattern:

<feature>="hello"

This reads like the following:

• assign the hello action of type event to the input channel of <feature>

Again, this does not imply any work by itself - each individual feature will decide what to do with the input.

Info

Both sides are declarations — KEML has no event or signal system.

It runs in an event-driven browser, but itself is purely declarative: nothing is emitted or observed, and neither side is aware of the other.

---

Supported events

All event types are supported by KEML, regardless of their origin — KEML makes no distinction between them:

• native events
• events defined by KEML itself
• custom events emitted by other JavaScript on an element

---

KEML-defined events

1. reveal - element enters the viewport
2. conceal - element leaves the viewport
3. navigate - History API transition
4. result - successful server result
5. failure - unsuccessful server result
6. discover - the element becomes known to the system (if the on:discover attribute is removed and then added back, the event will be emitted again)
7. attr:<name> - the attribute named <name> is added, removed, or changed

---

event: modifier

The output channel of event actions can be conditionally blocked by an event: modifier:

event:<event>="key = value, otherKey = otherValue, truthyCheck"

This performs a shallow comparison between an event object and a specification provided in quotes.

HTML Server Result

<h4 class="mt0">Type something in and press `Ctrl+Enter` 😊</h4>

<input
  name="message"
  autocomplete="off"
  class="input"
  required
  on:keydown="submitEventModifier"
  event:keydown="key = Enter, ctrlKey"
  on="submitEventModifier"
  src="/event-modifier"
  result="eventModifierResult"
>

<div render="eventModifierResult"></div>

<small class="chip mt3">Shortcut triggered</small>

<p>You just used your first hotkey with KEML!</p>

<dl class="dl">
  <dt>Your message:</dt>
  <dd>{ server.getParam("message") }</dd>
</dl>

Type something in and press `Ctrl+Enter` 😊

---

Parent handler

KEML does not interfere with normal browser event bubbling. This is not bubbling, but simple parent lookup.

on:* does not have to be set directly on the event emitting element; it can also be on any of its parents.

HTML Server Result

<h4 class="mt0">
  The button is clicked, a parent div is outputting the actions, but then the
  button itself is still handling them anyway 😅.
</h4>

<div on:click="sendFromParent">
  <div>
    <button
      type="button"
      class="btn"
      on="sendFromParent"
      href="/parent-handler"
      result="parentResult"
    >
      click me
    </button>
  </div>
</div>

<div render="parentResult"></div>

<small class="chip mt3">Received</small>

<p class="mb0">Click handled by a parent element.</p>

The button is clicked, a parent div is outputting the actions, but then the button itself is still handling them anyway 😅.

click me