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!` );
            } }
        }
    }
} );