Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
from a typed event created via the defineTypedEvent function, or be the name of a
built-in event (like 'click').
The callback to fire when an event is caught. Assuming the defineTypedEvent input is properly typed, the event given to this callback will also be typed.
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 a return value from defineTypedEvent).
Needs to come either from a declarative element (like MyDeclarativeElement.events.eventName),
from a typed event created via the defineTypedEvent function, or be the name of a
built-in event (like 'click').
The callback to fire when an event is caught. Assuming the defineTypedEvent input is properly typed, the event given to this callback will also be typed.
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 a return value from defineTypedEvent).