on:event

Respond to events on elements or component ViewModels.

`on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'`

If the element has a ViewModel, listens to an event on the ViewModel and calls the Call Expression when that event occurs.

If the element does not have a ViewModel, listens to an event on the element and calls the Call Expression when that event occurs.

<my-component on:show="doSomething()"/>

Parameters

VIEW_MODEL_OR_DOM_EVENT {String}:
A viewModel or DOM event.
CALL_EXPRESSION {Expressions}:
A call expression like method(key) that is called when the VIEW_MODEL_EVENT is fired. The following key values are also supported:
- %element - The element the event happened upon.
- %event - The event object.
- %viewModel - If the element is a can-component, the component’s ViewModel.
- %context - The current context.
- %scope - The current can-view-scope.
- %arguments - The arguments passed when the event was dispatched/triggered.

`on:el:DOM_EVENT='CALL_EXPRESSION'`

Listens to an event on the element and calls the Call Expression when that event occurs.

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

Parameters are the same as on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'

`on:vm:VIEW_MODEL_EVENT='CALL_EXPRESSION'`

Listens to an event on the element’s ViewModel and calls the Call Expression when that event occurs.

<my-component on:vm:show="doSomething()"/>

Parameters are the same as on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'

`on:VIEW_MODEL_OR_DOM_EVENT:value:to='SCOPE_VALUE'`

If the element has a ViewModel, listens to an event on the ViewModel and binds the element's value to the SCOPE_VALUE when that event occurs.

If the element does not have a ViewModel, listens to an event on the element and binds binds the element's value to the SCOPE_VALUE when that event occurs.

<my-component on:show:value:to="myScopeProp"/>

Parameters

VIEW_MODEL_OR_DOM_EVENT {String}:
A viewModel or DOM event.
SCOPE_VALUE {String}:
A value in the current scope.

`on:SCOPE_EVENT:by:this='CALL_EXPRESSION'`

Listens to an event on the scope and calls the Call Expression when that event occurs.

<my-component on:show:by:this="doSomething()"/>

Parameters

SCOPE_EVENT {String}:
a scope event.
CALL_EXPRESSION {Expressions}:
A call expression like method(key) that is called when the VIEW_MODEL_EVENT is fired. Same as on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'

`on:SCOPE_PROP_EVENT:by:SCOPE_PROP='CALL_EXPRESSION'`

Listens to an event on a property of the scope and calls the Call Expression when that event occurs.

<my-component on:show:by:obj="doSomething()"/>

Parameters

SCOPE_PROP_EVENT {String}:
an event triggered by a scope property.
SCOPE_PROP {String}:
a scope property.
CALL_EXPRESSION {Expressions}:
A call expression like method(key) that is called when the VIEW_MODEL_EVENT is fired. Same as on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'

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(%index,1)" to remove a 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’s ViewModel, 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:

Component.extend({
  tag: "player-edit",
  template: can.view('player-edit-stache'),
  viewModel: {
    close: function(){
      this.dispatch("close");
    }
  }
});

The following demo uses this ability to create a close button that hides the player editor:

Changing a property when an event occurs

An event on either the element or viewModel can be set to bind the element's value to a property on the scope like:

<input type="text" value="" on:blur:value:to="myScopeProp">

This will set the value of myScopeProp to the input's value anytime the input loses focus.