(event)

function

Response to events on elements or component ViewModels.

`($DOM_EVENT)='CALL_EXPRESSION'`

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

<div ($click)="doSomething()"/>

Parameters

DOM_EVENT {String}:
A DOM event name like "click".
CALL_EXPRESSION {Call Expression}:
A call expression like method(key) that is called when the DOM_EVENT is fired. The following key values are also supported:
- %element - The element the event happened upon.
- $element - The <a href="can-jquery.html" title="Extensions to the event system so that can events and jQuery events are cross-bound. Importing can-jquery will return the jQuery object and wire up the event system. var $ = require("can-jquery");
var div = $("<div>");

div.on("inserted", function(){ // it inserted! });

$("body").append(div);">can.$ wrapped element the event happened upon.
- %event - The event object.
- %viewModel - If the element is a can-component, the component's [can-component::viewModel viewModel].
- %context - The current context.
- %scope - The current scope.
- %arguments - The arguments passed when the event was dispatched/triggered.

`(VIEW_MODEL_EVENT)='CALL_EXPRESSION'`

Listens to an event on the element's [can-component::viewModel viewModel] and calls the Call Expression when that event occurs.

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

Parameters

DOM_EVENT {String}:
A DOM event name like "click". jQuery custom events can also be given.
CALL_EXPRESSION {Expressions}:
A call expression like method(key) that is called when the DOM_EVENT is fired. The following key values are also supported:
- %element - The element the event happened upon.
- $element - The <a href="can-jquery.html" title="Extensions to the event system so that can events and jQuery events are cross-bound. Importing can-jquery will return the jQuery object and wire up the event system. var $ = require("can-jquery");
var div = $("<div>");

div.on("inserted", function(){ // it inserted! });

$("body").append(div);">can.$ wrapped element the event happened upon.
- %event - The event object.
- %viewModel - If the element is a can-component, the component's [can-component::viewModel viewModel].
- %context - The current context.
- %scope - The current can-view-scope.
- %arguments - The arguments passed when the event was dispatched/triggered.

Use

The use of (event) bindings changes between listening on DOM events and viewModel events.

DOM events

To listen on a DOM event, wrap the event name with ($event) like:

<div ($click)="doSomething()"/>

By adding ($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 ($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 ($SPECIAL)='KEY'. This is similar to $.special.

($enter)

($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' ($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 [can-component::viewModel viewModel], wrap the event name with (event) like:

<player-edit 
    (close)="removeEdit()" 
    {player}="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: