要为组件添加交互性，你可能需要添加一些事件处理器。Lit 使得在模板中添加_声明式_事件监听器变得简单，使用如下表达式：

<button @click=${this.handleClick}>Click me!</button>

这里我们提供了一个带有消息和输入元素的姓名标签组件。在这一步中，你将使用声明式事件监听器，使组件能够处理输入事件。

• 添加声明式事件监听器。

  找到输入元素并添加声明式事件监听器：

  <input @input=${this.changeName} placeholder="Enter your name">

  这个 @input 表达式将 this.changeName 添加为 input 事件的事件监听器。（你可以将此语法用于任何事件监听器——只需将 input 替换为任何事件名称，将 this.changeName 替换为任何求值为事件处理器的 JavaScript 表达式。）

• 添加事件处理器方法。

  接下来，添加输入值变化时调用的事件处理器。

  changeName(event: Event) {
    const input = event.target as HTMLInputElement;
    this.name = input.value;
  }

  changeName(event) {
    const input = event.target;
    this.name = input.value;
  }

  由于 name 是一个响应式属性，在事件处理器中设置它会触发组件更新。

尝试输入一个名字。

有关声明式事件处理器的更多信息，请参见事件。