can-EVENT

function

Deprecated 2.2

Use [can.view.bindings.event event binding] (($EVENT)="METHOD()") instead.

`(EVENT)='{methodKey [argKey..] [hashName=hashKey...]}'`

Specify a callback function to be called on a particular event. This is a shorthand for can-EVENT attributes.

`can-EVENT='{methodKey [argKey..] [hashName=hashKey...]}'`

Specify a callback function to be called on a particular event. You can create your own special event types.

Parameters

EVENT {String}:
A event name like click or keyup. If you are using jQuery, you can listen to jQuery special events too.
methodKey {key}:
A named key value in the current scope. The value should be a function.
argKey {key}:
Key values that will be passed as arguments to the methodKey function value. Key values can be read from the scope, or literals like "foo", 1, etc.

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 [can-component::viewModel viewModel].
- @context - The current context.
- @scope - The current Scope.
If no argKeys or hashKeys are provided, the methodKey will be called with the @context, @element and @event as arguments.
hashName {String}:
A property name that gets added to the hash argument. The hash argument is the last value passed to the function specified by methodKey.
hashKey {key}:
Specifies value that is added to the hash argument for a hashName value. hashKey supports the same key values as argKey.

Use

By adding can-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, except name=value arguments, which will all be given as part of a hash argument inserted after all direct arguments.

If no argKeys or hashKeys are provided, the methodKey will be called with the @content, @element and @event as arguments.

The following uses can-click={items.splice @index 1} to remove a item from items when that item is clicked on.

Special Event Types

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

can-enter / (enter)

can-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' can-enter='{save}' />

The above template snippet would cause the save method (in the [can.mustache Mustache] scope) whenever the user hits the enter key on this input.