LitElement(五)事件

1、概述

1.1 在何处添加事件监听器

您需要以一种可以在事件发生之前触发的方法添加事件监听器。但是，为了获得最佳的加载性能，应尽可能晚添加事件监听器。

你可以在以下位置添加事件监听器：

1.1.1 组件的模板中

您可以在render函数内的模板中使用lit-html @event 绑定，将事件监听器添加到组件中。例如：

render() {
  return html`<button @click="${this.handleClick}">`;
}

1.1.2 在组件构造方法中

如果您需要监听将组件添加到DOM之前可能发生的事件，则可能需要在组件的构造函数中添加事件监听器。例如：

constructor() {
  super();
  this.addEventListener('DOMContentLoaded', this.handleLoaded);
}

1.1.3 在firstUpdated中

firstUpdated是一个LitElement生命周期回调。首次更新和渲染组件后，会触发firstUpdated。

如果您要处理的事件在第一次更新和呈现组件之前无法发生，那么在firstUpdated中为其添加监听器是安全有效的。

firstUpdated(changedProperties) {
  this.addEventListener('click', this.handleClick);
}

1.1.4 在connectedCallback中

connectedCallback是自定义元素API中的生命周期回调。

每当将自定义元素附加到文档连接的元素中时，connectedCallback都会触发。

如果您的组件将事件监听器添加到其自身或其子级以外的任何事物（例如，添加到Window，Document或主DOM中的某个元素），则应在connectedCallback中添加监听器，并在disconnectedCallback中将其删除。

• 删除disconnectedCallback中的事件监听器可确保在销毁组件或将其与页面断开连接时，将清除由组件分配的所有内存。
• 在connectedCallback（而不是例如构造函数或firstRendered）中添加事件侦听器可确保您的组件在断开连接并随后重新连接至DOM时将重新创建其事件侦听器。

例如：

connectedCallback() {
  super.connectedCallback();
  document.addEventListener('readystatechange', this.handleChange);
}
disconnectedCallback() {
  document.removeEventListener('readystatechange', this.handleChange);
  super.disconnectedCallback();
}

1.2 在事件处理函数中使用this

就像其他语言中的this一样，基于LitElement的组件的事件处理程序中的默认JavaScript上下文对象（this）是组件本身。

用法也是一样，您可以使用它来引用任何事件处理程序内的元素实例：

class MyElement extends LitElement {
  render() {
    return html`<button @click="${this.handleClick}">click</button>`;
  }
  handleClick(e) {
    console.log(this.prop);
  }
}

关于JavaScript的this指针详见MDN文档

1.3 从基于LitElement的组件触发事件

1.3.1 触发一个自定义事件

class MyElement extends LitElement {
  render() {
    return html`<div>Hello World</div>`;
  }
  firstUpdated(changedProperties) {
    let event = new CustomEvent('my-event', {
      detail: {
        message: 'Something important happened'
      }
    });
    this.dispatchEvent(event);
  }
}

1.3.2 触发一个标准事件

class MyElement extends LitElement {
  render() {
    return html`<div>Hello World</div>`;
  }
  updated(changedProperties) {
    let click = new Event('click');
    this.dispatchEvent(click);
  }
}

1.4 处理由基于LitElement的组件触发的事件

如果要从另一个LitElement或lit-html模板中监听从基于LitElement的组件触发的事件，则可以使用lit-html声明性事件语法：

<my-element @my-event="${(e) => { console.log(e.detail.message) }}"></my-element>

要在其他上下文（例如HTML或其他框架）中监听从基于LitElement的组件触发的事件，请使用标准机制监听DOM事件。

在纯HTML和JavaScript中，这将是addEventListener API：

const myElement = document.querySelector('my-element');
myElement.addEventListener('my-event', (e) => {console.log(e)});

2、处理事件和影子DOM

使用事件和影子DOM时，需要了解一些事项。

2.1 事件冒泡

一些事件在DOM树中冒泡，因此页面上的任何元素都可以检测到它们。

事件是否冒泡取决于bubbles属性。要检查特定事件是否冒泡：

handleEvent(e){
  console.log(e.bubbles);
}

有关更多信息，请参见MDN上的事件接口文档。

2.2 事件重定向

从影子DOM内部触发的冒泡事件被重定向，所以对组件外部的任何监听器而言，它们似乎都来自组件本身。

example：

<my-element onClick="(e) => console.log(e.target)"></my-element>

render() {
  return html`
    <button id="mybutton" @click="${(e) => console.log(e.target)}">
      click me
    </button>`;
}

处理此类事件时，您可以使用compoundPath查找其起源：

handleMyEvent(event) {
  console.log('Origin: ', event.composedPath()[0]);
}

2.3 自定义事件

默认情况下，在影子DOM内部触发的冒泡自定义事件在到达影子root时将停止冒泡。

要使自定义事件通过阴影DOM边界传递，必须将composite和bubble标志都设置为true：

firstUpdated(changedProperties) {
  let myEvent = new CustomEvent('my-event', {
    detail: { message: 'my-event happened.' },
    bubbles: true,
    composed: true });
  this.dispatchEvent(myEvent);
}

有关更多信息，请参见有关自定义事件的MDN文档。