Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
from a typed event constructor, or be the name of a built-in event (like 'click').
The callback to fire when an event is caught. The event type is inferred from the constructor.
import {html, defineElement, listen} from 'element-vir';
const MyElement = defineElement()({
tagName: 'my-element',
render() {
return html`
<div
${listen('click', () => {
console.log('clicked!');
})}
>
Some div
</div>
<${MyOtherElement}
${listen(MyOtherElement.events.someEvent, (event) => {
console.log('event value', event.detail);
})}
></${MyOtherElement}>
`;
},
});
Listen to events. These can be native DOM events (use a string for the inputType argument) or
typed events (pass in an event constructor from typed-event-target).
Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
from a typed event constructor, or be the name of a built-in event (like 'click').
The callback to fire when an event is caught. The event type is inferred from the constructor.
import {html, defineElement, listen} from 'element-vir';
const MyElement = defineElement()({
tagName: 'my-element',
render() {
return html`
<div
${listen('click', () => {
console.log('clicked!');
})}
>
Some div
</div>
<${MyOtherElement}
${listen(MyOtherElement.events.someEvent, (event) => {
console.log('event value', event.detail);
})}
></${MyOtherElement}>
`;
},
});
Listen to events. These can be native DOM events (use a string for the inputType argument) or typed events (pass in an event constructor from
typed-event-target).