Stencil笔记（5）- Events

即发布订阅模式

要自定义事件，可以使用Events装饰器。

import { Event, EventEmitter } from '@stencil/core';

export class TodoList {

  @Event() todoCompleted: EventEmitter;

  todoCompletedHandler(todo: Todo) {
    this.todoCompleted.emit(todo);
  }
}

监听事件

Listen()装饰器用于处理@Events发布的事件。下面的例子中，假设子组件todolist使用eventemitter发出一个todoCompleted事件。

import { Listen } from '@stencil/core';
...
export class TodoApp {

  @Listen('todoCompleted')
  todoCompletedHandler(event: CustomEvent) {
    console.log('Received the custom todoCompleted event: ', event.detail);
  }
}

事件还可以注册到一个具体的元素中，对于整个应用都要监听这个事件时比较有用：

import { Listen } from '@stencil/core';

...
export class TodoList {

  @Listen('body:scroll')
  handleScroll(ev) {
    console.log('the body was scrolled', ev);
  }
}

另外也可以监听键盘事件，得到键码或Stencil提供一些常量。

@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提供了以下一些常量，通过keydown访问，代表你按下了哪个：
enter
escape（即Esc键）
space（空格键）
tab
left
up
right
down

在JSX中绑定事件：

import { Event, EventEmitter } from '@stencil/core';

...
export class TodoList {

  @Event() todoCompleted: EventEmitter;

  todoCompletedHandler(todo: Todo) {
    this.todoCompleted.emit(todo);
  }
}

// 使用 

<todo-list onTodoCompleted={ev => this.someMethod(ev)}></todo-list>