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
1	Primary button (usually the left button)
2	Secondary button (usually the right button)
4	Auxilary button (usually the mouse wheel button or middle button)
8	4th button (typically the "Browser Back" button)
16	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.2.prevent="callMe"></a>

<!-- Ctrl + Left click -->
<a @pointerup.1.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.