JavaScript: gestire gli eventi e i loro callback con gli attributi di dati HTML5

Possiamo implementare un binding tra elementi HTML e JavaScript usando gli attributi di dati.

La soluzione consiste nell'usare il valore dell'attributo di dati come riferimento ad un metodo di un oggetto e ad un evento. Quindi data la seguente marcatura:

<p>
    <button id="test-button" data-action="click:test">Test</button>
</p>

avremo:

'use strict';

(function( namespace ) {
	
	function test() {
		alert( "ok" );
	}
	
	namespace.test = test;
	
	function doAction( element ) {
		const action = element.dataset.action;
        const [evtType, callback] = action.split(':');
		element.addEventListener( evtType, function() {
			namespace[callback]();	
			
		}, false);
	}
	
	document.addEventListener( "DOMContentLoaded", function() {
		doAction( document.querySelector( "#test-button" ) );	
		
	});
	
})( window );