Components can emit data and events using the Event Emitter decorator.
To dispatch Custom DOM events for other components to handle, use the @Event() decorator.
import { Event, EventEmitter } from '@stencil/core';
...
export class TodoList {
@Event() todoCompleted: EventEmitter;
todoCompletedHandler(todo: Todo) {
this.todoCompleted.emit(todo);
}
}
The code above will dispatch a custom DOM event called todoCompleted.
The Listen() decorator is for handling events dispatched from @Events.
In the example below, assume that a child component, TodoList, emits a todoCompleted event using the EventEmitter.
import { Listen } from '@stencil/core';
...
export class TodoApp {
@Listen('todoCompleted')
todoCompletedHandler(event: CustomEvent) {
console.log('Received the custom todoCompleted event: ', event.detail);
}
}
Handlers can also be registered for an event on a specific element. This is useful for listening to application-wide events. In the example below, we're going to listen for the scroll event.
import { Listen } from '@stencil/core';
...
export class TodoList {
@Listen('body:scroll')
handleScroll(ev) {
console.log('the body was scrolled', ev);
}
}
For keyboard events, you can use the standard keydown event in @Listen() and then figure out the keycode, or some constants Stencil provides.
@Listen('keydown')
handleKeyDown(ev){
if(ev.keyCode === 40){
console.log('down arrow pressed')
}
}
@Listen('keydown.up')
handleUpArrow(ev){
console.log('will fire when up arrow is pressed');
}
Stencil provides constants for the following keys, accessible via keydown.<CONSTANT>