标签：html模板 模板 develop message opera 添加 绑定 框架 bsp
您需要以一种可以在事件发生之前触发的方法添加事件监听器。但是，为了获得最佳的加载性能，应尽可能晚添加事件监听器。
你可以在以下位置添加事件监听器：
您可以在render函数内的模板中使用lit-html @event 绑定，将事件监听器添加到组件中。例如：
render() { return html`<button @click="${this.handleClick}">`; }
如果您需要监听将组件添加到DOM之前可能发生的事件，则可能需要在组件的构造函数中添加事件监听器。例如：
constructor() { super(); this.addEventListener(‘DOMContentLoaded‘, this.handleLoaded); }
firstUpdated是一个LitElement生命周期回调。首次更新和渲染组件后，会触发firstUpdated。
如果您要处理的事件在第一次更新和呈现组件之前无法发生，那么在firstUpdated中为其添加监听器是安全有效的。
firstUpdated(changedProperties) { this.addEventListener(‘click‘, this.handleClick); }
connectedCallback是自定义元素API中的生命周期回调。
每当将自定义元素附加到文档连接的元素中时，connectedCallback都会触发。
如果您的组件将事件监听器添加到其自身或其子级以外的任何事物（例如，添加到Window，Document或主DOM中的某个元素），则应在connectedCallback中添加监听器，并在disconnectedCallback中将其删除。
例如：
connectedCallback() { super.connectedCallback(); document.addEventListener(‘readystatechange‘, this.handleChange); } disconnectedCallback() { document.removeEventListener(‘readystatechange‘, this.handleChange); super.disconnectedCallback(); }
就像其他语言中的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文档
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); } }
class MyElement extends LitElement { render() { return html`<div>Hello World</div>`; } updated(changedProperties) { let click = new Event(‘click‘); this.dispatchEvent(click); } }
如果要从另一个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)});
使用事件和影子DOM时，需要了解一些事项。
一些事件在DOM树中冒泡，因此页面上的任何元素都可以检测到它们。
事件是否冒泡取决于bubbles属性。要检查特定事件是否冒泡：
handleEvent(e){
console.log(e.bubbles);
}
有关更多信息，请参见MDN上的事件接口文档。
从影子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]); }
默认情况下，在影子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文档。
标签：html模板 模板 develop message opera 添加 绑定 框架 bsp
原文地址：https://www.cnblogs.com/jixiaohua/p/11992831.html
