Event Listeners
There are two ways to listen for events on Reef elements.
Event delegation
The preferred way to listen for user interaction events in a Reef template is event delegation.
Run the addEventListener() method on the element you’re rendering your template into, and filter out events that occur on elements you don’t care about.
// The count
let count = signal(0);
// Increase the count by 1 when the [data-count] button is clicked
function increase (event) {
if (!event.target.matches('[data-count]')) return;
count.value++;
}
// The template
function template () {
return `<button data-count>Clicked ${count.value} times</button>`;
}
// Render the component
let app = document.querySelector('#app');
component(app, template);
// Listen for events
app.addEventListener('click', increase);
Try event delegation on CodePen →
Event binding
By default, on* events on elements are removed when rendering to reduce the risk of XSS attacks.
If you’d prefer to attach events directly to elements in your template using on* events, you must register them by passing an object of named event listener callback functions into your component as the events option.
Under-the-hood, Reef will remove any event handlers that aren’t registered.
// The count
let count = signal(0);
// Increase the count by 1
function increase () {
count.value++;
}
// The template
function template () {
return `<button onclick="increase()">Clicked ${count.value} times</button>`;
}
// Render the component
component('#app', template, {events: {increase}});