Element Event

This is how we define callback on our model

sf.model('...', function(self){
    self.callMe = function(event){
        console.warn(arguments);

        // this == Related element
        // arguments[0] == Event
        // arguments[1] == self

        /* When using sf-repeat-this element (RepetedElement feature) */
        // arguments[1] == item value
        // arguments[2] == self (model scope)
    }

    self.callMeArguments = function(text, ev){
        // arguments[0] == 'hello'
        // arguments[1] == Event
    }
});

And you can register any element for listening to an event by adding attribute with @ and the event name, that pointing to function name.

<a @click="callMe"></a>
<a @mouseup.left="callMe"></a>

<!-- You can also define the parameter -->
<a @click="callMeArguments('hello', event)"></a>

<!-- With control button -->
<a @mouseup.ctrl.left="callMe"></a>

<!-- Keyboard key must be started with UpperCase-->
<input type="text" @keyup.ctrl.Enter="callMe"/>
<input type="text" @keyup.ArrowUp.once="callMe"/> 

once, prevent, stop, passive, capture are available

<!-- Letters are case sensitive -->
<input type="text" @keyup.Z="callMe"/> UpperCase `Z`
<input type="text" @keyup.z="callMe"/> LowerCase `z`

Almost all event are supported like keyup, mousedown, touchup, scroll, etc.

PointerEvent

Key	name
left	Primary button (usually the left button)
right	Secondary button (usually the right button)
middle	Auxilary button (usually the mouse wheel button or middle button)
4th	4th button (typically the "Browser Back" button)
5th	5th button (typically the "Browser Forward" button)

The pointer event is coming from pointerup, pointerdown, pointermove, etc.

<!-- Right click but prevent context menu -->
<a @pointerup.right.prevent="callMe"></a>

<!-- Ctrl + Left click -->
<a @pointerup.left.ctrl="callMe"></a>

Addional event

event	description
taphold	Trigger event when user clicked around 0.7s
gesture	Trigger event when user doing 2 finger tap or CTRL + Click for rotate or scale behaviour
dragmove	Trigger event when user doing 2 finger tap for move behaviour
filedrop	Trigger event when file was dropped on the element

There are small example for you to try.