Declarativing assigning event handlers with AutoBind

Use a dev console to see the fired events.

To assign a single handler to multiple events:

<button data-events="click, blur" 
        data-handlers="clickTest">
    Click me
</button>

To assign a seperate handler to every event specified:

<button data-events="click, blur" 
        data-handlers="clickTest, blurTest">
    Click me
</button>

Use AutoBind's addEventHandler to add event handlers. Defining an event handler with a traditional function ensures that the this value in the function correctly references the target element (arrow arrow functions don't have their own this. You could also specify any other in-scope function name (that expects an event argument) with addEventHandler.

'use strict';

const ab = new rp.Autobind();

ab.addEventHandler('clickTest', function(e) {
    console.log(this);
    console.log(e.type);
    console.log(e.currentTarget);
    console.log('event handled');
});

ab.assignAutoboundEventHandlers();

Click the button or move focus to the input to fire the button's two events.