TemplateListenerSchema (ui)

Describes an event listener attached to an HTML element. Such listener can propagate DOM events through an Observable instance, execute custom callbacks or both, if necessary.

Also see:

• TemplateDefinition to learn more about template definitions,
• to() method to learn more about bindings.

Check out different ways of attaching event listeners below:

// Bind helper will propagate events through the observable.
const bind = Template.bind( observable, emitter );

new Template( {
	tag: 'p',
	on: {
		// An object schema. The observable will fire the "clicked" event upon DOM "click".
		click: bind.to( 'clicked' )

		// An object schema. It will work for "click" event on "a.foo" children only.
		'click@a.foo': bind.to( 'clicked' )

		// An array schema, makes the observable propagate multiple events.
		click: [
			bind.to( 'clicked' ),
			bind.to( 'executed' )
		],

		// An array schema with a custom callback.
		'click@a.foo': {
			bind.to( 'clicked' ),
			bind.to( evt => {
				console.log( `${ evt.target } has been clicked!` );
			} }
		}
	}
} );