Use

DOM events

on:el: will listen for events on the DOM, on: can also be used to listen for DOM events if the element does not have a ViewModel.

<div on:click="doSomething()"/>

By adding on:EVENT='methodKey()' to an element, the function pointed to
by methodKey is bound to the element’s EVENT event. The function can be
passed any number of arguments from the surrounding scope, or name=value
attributes for named arguments. Direct arguments will be provided to the
handler in the order they were given.

The following uses on:click='../items.splice(scope.index,1)' to remove an
item from items when that item is clicked on.

Special Event Types

can-stache-bindings supports creating special event types
(events that aren’t natively triggered by the DOM), which are
bound by adding attributes like on:SPECIAL='KEY'. This is
similar to $.special.

on:enter

on:enter is a special event that calls its handler whenever the enter
key is pressed while focused on the current element. For example:

<input type='text' on:enter='save()' />

The above template snippet would call the save method
(in the scope) whenever
the user hits the enter key on this input.

viewModel events

To listen on a Component’sViewModel, prepend the event with on: (on:vm: can also be used to be make this more explicit) like:

<player-edit
on:close="removeEdit()"
player:from="editingPlayer"/>

ViewModels can publish events on themselves. The following <player-edit> component
dispatches a "close" event on itself when its close method is called: