Element Event

Before the example, let's define our model first

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.

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.