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边界传递,必须将compositebubble标志都设置为true

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

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

posted @ 2019-12-07 22:35  姬无华  阅读(756)  评论(0编辑  收藏  举报