Getting Started Installation Templating Event handling Components Directives Examples API Reference

Event handling

You can add event listener directly on node by getting node reference with querySelector method of view instance.

import Monkberry from 'monkberry';
import Template from './monkberry.monk';

const view = Monkberry.render(Template, document.body);

const node = view.querySelector('div');

node.addEventListener('click', (event) => { ... });

But this can be difficult when using ifs and for, because nodes can appear and disappear from view.

Event delegating

Better solution is using event delegating, install monkberry-events:

npm install monkberry-events --save

and import it once in your project. It will add two more methods on Monkberry instances: on and off.

import 'monkberry-events';

Now you can add event listener like this:

view.on('click', 'div', (event) => { ... });

Event listeners

Also there is another aproach using directives.

<div :onclick={{ this.handleClick }}>
  ...
</div>

See all available event listeners in monkberry-directives package.

Next, we describe how to use the component approach in Monkberry.

Next →