1 Overview

1.1 Where to add event listeners

You need to be a method that can be triggered in the event before adding the event listeners. However, in order to obtain the best load performance, you should add event listeners late as possible.

You can add event listeners in the following locations:

1.1.1 template components

You can render using the lit-html template within the function @event Bind to add an event listener to the component. E.g:

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

1.1.2 assembly constructor

If you need to add components to monitor events that may occur before the DOM, you may need to add event listeners in the constructor component. E.g:

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

1.1.3 In the firstUpdated

firstUpdated is a LitElement lifecycle callbacks . After the first update and rendering components, can trigger firstUpdated.

If the event can not take place before you want to process and update the presentation component in the first, then firstUpdated in to add a listener is safe and effective.

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

1.1.4 In the connectedCallback

connectedCallback custom elements in the API lifecycle callbacks.

Whenever the custom elements attached to elements in the document connected, connectedCallback triggers.

If your component to add event listeners to anything other than their own or their children (for example, an element added to the Window, Document, or master the DOM), you should connectedCallback add a listener, and disconnectedCallback will be deleted.

Delete disconnectedCallback in the event listener to ensure that components or destroyed when it is disconnected from the page to clear all the memory allocated by the component.
In connectedCallback (for example, instead of a constructor or firstRendered add) in the event listeners can be sure to re-create its event listeners when your component and then reconnected to the DOM disconnected.

E.g:

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

1.2 Use this event handler

Like other languages in this same event handler based on the component LitElement default JavaScript in the context of the object ( this ) is the component itself .

Usage is the same, you can use it to refer to any element instance in the event handler:

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

See this pointer on JavaScript MDN documentation

1.3 trigger events from component-based LitElement

1.3.1 trigger a custom event

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 trigger a standard event

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

1.4 handle events triggered by the LitElement-based component of

If you want another LitElement or lit-html template listener from component-based LitElement event triggers, you can use the lit-html declarative event syntax:

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

To listen in other contexts (such as HTML or other frame) from the trigger event LitElement component-based, use a standard mechanism Listening to DOM events.

In pure HTML and JavaScript, it will be the addEventListener API:

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

2, event handling and DOM shadow

When using the event and shadow DOM, you need to know a few things.

2.1 event bubbling

Some events in the DOM tree bubble, so any element on the page can detect them.

Depending on whether the event bubbles bubbles property. To check whether a particular event bubbling:

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

For more information, see the MDN event interface documentation.

2.2 redirection event

Bubbling event triggered from within the shadow DOM is redirected, so for any external components listeners, they all seem to come from the component itself.

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>`;
}

When dealing with such an event, you can use compoundPath find its origin:

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

2.3 Custom Event

By default, the shadow DOM bubbling inside a custom event trigger in the shadow of reach of root will stop bubbling when.

To make a custom DOM events through the shadow boundary transfer must be composite and bubble flags are set to true :

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

For more information, see the related custom event MDN documentation .

LitElement (five) events