Event directives

edit this page

DOM events are handled with template directives that take the form of element attributes, similar to global native DOM handlers, but are prefixed with on- plus the name of the event:

<button on-click="activate">click me!</button>

You can assign multiple events by separating them with a hyphen:

<div on-mouseover-mousemove='set( "hover", true )'>...</div>

The structure of the attribute content will vary depending on whether you are using proxy events (the first example) or method calls (the second example). See each respective section for more details.

DOM events can be any supported event on the element node. Touch events - touchstart, touchmove, touchend, touchcancel, and touchleave (not w3c, but supported in some browsers) - can be used as well, and will be safely ignored if not supported by the current browser.

DOM Events will be automatically unsubscribed when the ractive instance is torndown.

Cancelling DOM Events

See publish-subscribe for information on automatically stopping DOM event propagation and default action.

Custom events

In addition to all the usual DOM events, you can use custom events via event plugins. These allow you to define what conditions on the node should generate a directive-level event.

For example, you could add gesture support to your app with ractive-touch, which integrates Hammer.js with Ractive.

Once defined, the custom event can then be used like any other event directive:

<div on-swipeleft="nextPage">...</div>

Be aware that custom event names take precedence over native DOM event names.

Component event directives

Template component elements can also have event directives:

<my-widget on-foo="bar"/>

However, there are some differences and limitations to component event directives: