Element Event

This is how we define callback on our model

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

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

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

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

You can register any element for listening to an event by adding attribute with @ and the event name, that pointing to function name. Almost all event are supported like keyup, mousedown, touchup, scroll, etc.

<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"/> 

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

Available options for the events

Options	Description
once	Call the function only once
prevent	Prevent default behaviour of the browser
stop	Stop the event from bubbling up the DOM tree
stopAll	Stop other event on current element or bubbling up the DOM tree after the event was triggered
passive	Use this to improve performance for scrolling event, but you can't call .preventDefault
capture	Opposite of bubbling up, this event will be triggered when event start from top of element

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>
<a @contextmenu.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.