Mini Events function the same as normal events, the difference is that variables defined in it trigger DOM updates when re-assigned.

A native event can be turned into a Mini / dynamic event by replacing on with :. Example: turning onclick to :click.

Last updated at March 2, 2024 by Joeylene

Getting the Event

Inside dynamic events, you can get the event object by using the event variable:

Example usage:

<input :keyup="console.log(event.code)" />

Entity events are managed under lib/entity/events.js. Each entity will have their events initialized on creation:

// lib/entity.js
export class Entity {
  constructor(el, dynamicScripts = []) {
   ...
   this.events = new Events(this)
   ...
  }

Custom Events

The following are the available custom events that Mini has:

• :clickout - This will trigger when the user clicks outside of the current element.
  • This event is added by setClickoutEvent.
• :clickme - This will trigger when the user clicks the current element.
  • This event is added by setClickMeEvent.
• :change - This will trigger when the user changes the value of a form input.
  • This event is added by setChangeEvent.
• :press - This will trigger when the user:
  • triggers the click event.
  • triggers the keyup.enter and keyup.space events.
  • triggers the touchstart event
  • This event is added by setPressEvent.

Keyboard Events

For keyboard events, you can listen to them using :keyup, :keydown, and :keypress:

keyboard events, you can listen to them using :keyup, :keydown, and :keypress:

<input type="text" :keyup="console.log(event)" />

Keyboard Events are added by setKeyEvents.