Click-handler NPM

Declarative JS click handler

click-handler is a very small library that allows you to bind click events to interactive HTML elements in a declarative way.

Example usage

HTML

Declare handlers by adding a data-handler="handler-name" attribute. Multiple handlers can be added by separating them with white-space.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My app</title>
	<script src="click-handler.js"></script>
</head>
<body>
	<p><a href="/path/to/somewhere" data-handler="my-handler">example</a></p>
	<p><button type="button" data-handler="my-other-handler">other example</button></p>
	<p><button type="button" data-handler="my-handler my-other-handler">two handlers</button></p>
</body>
</html>

JavaScript

You can register handlers individually:

function myHandler(e) {
	e.preventDefault();
	console.log('clicked my handler');
}
clickHandler.register('my-handler', myHandler);

// or

clickHandler.register('my-other-handler', function(e) {
	e.preventDefault();
	console.log('clicked my other handler');
});

…or register an object of handlers in one go:

var handlers = {
	'my-handler': function(e) {
		e.preventDefault();
		console.log('clicked my handler');
	},
	'my-other-handler': function(e) {
		e.preventDefault();
		console.log('clicked my other handler');
	}
}
clickHandler.register(handlers);

// or

clickHandler.register({
	'my-handler': function(e) {
		e.preventDefault();
		console.log('clicked my handler');
	},
	'my-other-handler': function(e) {
		e.preventDefault();
		console.log('clicked my other handler');
	}
});

Unregistering a handler can be done as follows:

clickHandler.unregister('my-handler');

…or to unregister multiple handlers:

clickHandler.unregister('my-handler', 'my-other-handler');

Options

click-handler for now has two configurable options:

clickHandler.configure({
	// to always preventDefault, default: false
	alwaysPreventDefault: true,
	// number of levels to traverse up the DOM to find a handler, default: 2
	maxTraverse: 3
});