DoneJS StealJS jQuery++ FuncUnit DocumentJS
6.0.1
5.33.2 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-deep-observable
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-observable-bindings
      • can-stache
      • can-stache-bindings
        • Syntaxes
          • on:event
          • key:raw
          • key:from
          • key:to
          • key:bind
      • can-stache-converters
      • can-stache-element
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-model
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-define-realtime-rest-model
      • can-define-rest-model
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

on:event

  • Edit on GitHub

Respond to events on elements or component ViewModels.

on:VIEW_MODEL_OR_DOM_EVENT='CALL_EXPRESSION'

If the element is a can-stache-element, listens to an event on the element and calls the Call Expression when that event occurs.

If the element is a can-component, listens to an event on the ViewModel and calls the Call Expression when that event occurs.

For all other elements, listens for a DOM event on the element and calls the Call Expression when that event occurs.

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

Parameters

  1. VIEW_MODEL_OR_DOM_EVENT {String}:

    A viewModel or DOM event.

  2. CALL_EXPRESSION {Expressions}:

    A call expression like method(key) that is called when the VIEW_MODEL_EVENT is fired. The following scope key values are also supported:

    • scope.element - The element the event happened upon.
    • scope.event - The event object.
    • scope.viewModel - If the element is a can-component, the component’s ViewModel.
    • scope.context - The current context.
    • scope.scope - The current can-view-scope.
    • scope.arguments - The arguments passed when the event was dispatched/triggered.

on:VIEW_MODEL_OR_DOM_EVENT='KEY = VALUE'

Listen to an event and set a property value. The following sets the priority property when a button is clicked:

<my-demo></my-demo>
<script type="module">
import { StacheElement } from "can";

class MyDemo extends StacheElement {
  static view = `
    <p>Priority: {{ this.priority }}</p>
    <button on:click="this.priority = 0">Urgent</button>
    <button on:click="this.priority = 1">Critical</button>
    <button on:click="this.priority = 10">Fahgettaboudit</button>
  `;

  static props = {
    priority: Number
  };
}
customElements.define("my-demo", MyDemo);
</script>

Parameters

  1. VIEW_MODEL_OR_DOM_EVENT {String}:

    A viewModel or DOM event.

  2. key {String}:

    A key value to set. This can be any key accessible by the scope. For example:

    • Set values on the viewModel - on:click="this.priority = 0".
    • Set values on a variable in the scope - on:click="todo.priority = 0".
    • Set values on a scope value - on:click="scope.element.value = 0"
  3. VALUE {Expressions}:

    An expression that evaluates to a value. For example:

    • primitives - on:click="this.priority = 0"
    • variables - on:click="this.priority = todo.priority"
    • functions - on:click="this.priority = this.getPriority(todo)"
    • converters - on:click="this.complete = not(this.complete)"

    The following scope values can also be read:

    • scope.element - The element the event happened upon.
    • scope.event - The event object.
    • scope.viewModel - If the element is a can-component, the component’s ViewModel.
    • scope.context - The current context.
    • scope.scope - The current can-view-scope.
    • scope.arguments - The arguments passed when the event was dispatched/triggered.
  4. CALL_EXPRESSION {Expressions}:

    A call expression like method(key) that is called when the VIEW_MODEL_EVENT is fired.

on:VIEW_MODEL_OR_DOM_EVENT:KEY:to='SCOPE_VALUE'

If the element is a can-stache-element, listens to an event on the element and binds the element’s value to the SCOPE_VALUE when that event occurs.

If the element is a can-component, listens to an event on the ViewModel and binds the element’s value to the SCOPE_VALUE when that event occurs.

For all other elements, listens for a DOM event on the element and binds the element’s value to the SCOPE_VALUE when that event occurs.

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

Parameters

  1. VIEW_MODEL_OR_DOM_EVENT {String}:

    A viewModel or DOM event.

  2. 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-element on:show:by:this="doSomething()" />

Parameters

  1. SCOPE_EVENT {String}:

    a scope event.

  2. 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-element on:show:by:obj="doSomething()" />

Parameters

  1. SCOPE_PROP_EVENT {String}:

    an event triggered by a scope property.

  2. SCOPE_PROP {String}:

    a scope property.

  3. 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

The can-stache-bindings page has many examples of on:event.

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 6.0.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news