click-handler is a very small library that allows you to bind click events to interactive HTML elements in a declarative way.
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>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');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
});You can install click-handler using npm:
npm install click-handler [--save]click-handler is available under the MIT license