StencilJs學習之事件

其實並沒有所謂的 stencil Event，相反 stencil 鼓勵使用 DOM event。然而，Stencil 提供了一個 API 來指定組件可以觸發的事件，以及組件監聽的事件。 這是通過 Event()和 Listen()裝飾器實現的。

Event 裝飾器

組件可以使用事件發射器裝飾器發送數據和事件。

要將自定義 DOM 事件分發給其他組件處理，可以使用@Event()裝飾器。

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

...
export class TodoList {

  @Event() todoCompleted: EventEmitter<Todo>;

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

上面的代碼將 dispatch 一個名為 todoCompleted 的自定義 DOM 事件。

EventOptions

interface EventOptions {
    /**
     * 自定義事件名稱
     */
    eventName?: string;
    /**
     * 表明事件是否允許冒泡
     */
    bubbles?: boolean;

    /**
     * 表明事件是否允許取消
     */
    cancelable?: boolean;

    /**
     * 表示事件是否可以跨越shadow DOM和regular DOM的邊界
     */
    composed?: boolean;
}

Listen 裝飾器

Listen() 裝飾器用於監聽 DOM 事件，包括從 @Events 分發的事件。當組件從 DOM 中添加或刪除時，事件監聽器會自動添加或刪除。

在下麵的示例中，假設子組件 TodoList 使用 EventEmitter 觸發 todoCompleted 事件。

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

...
export class TodoApp {

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

ListenOptions

interface ListenOptions {
    target?: "body" | "document" | "window"; // 如果target屬性不設置值，則預設監聽host（宿主元素）
    capture?: boolean;
    passive?: boolean;
}

使用組件的自定義事件

在 jsx 中使用

// 在stencilJs項目內使用
import { Event, EventEmitter } from '@stencil/core';

...
export class TodoList {

  @Event() todoCompleted: EventEmitter<Todo>;

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

常規使用

<todo-list></todo-list>
<script>
    const todoListElement = document.querySelector("todo-list");
    todoListElement.addEventListener("todoCompleted", (event) => {
        /* your listener */
    });
</script>

結束語

至此，我們已經基本把 StencilJs 的相關基礎知識已經學習的差不多了，由於 stencilJs 使用的 tsx
來開發的，所以在下一章節中將會學習如何使用 tsx。