javascript - Vanilla Web Component 自定义事件属性和属性

Question

在没有任何框架的情况下使用 Web Components，实现自定义事件的正确方法是什么？例如，假设我有一个自定义元素 x-pop-out有一个自定义事件 pop我希望以下所有功能都能正常工作:

<x-pop-out onpop="someGlobal.doSomething()"/>

var el = document.getElementsByTagName('x-pop-out')[0];
el.onpop = ()=> someGlobal.doSomething();
//or
el.addEventListener('pop', ()=> someGlobal.doSomething());

我得到了最后一个方法，但是我需要为每个自定义实现属性和 getter/setter 吗？另外，是 eval()从属性执行字符串的适当方法？

Answer 1

事件监听器解决方案(第三个)是最简单的，因为您不必定义任何特殊的东西来捕捉事件。

事件处理程序解决方案需要创建一个eval()(第一个，来自属性)或显式调用函数(第二个)。

如果您不能使用 eval，您可以改为解析属性字符串。

customElements.define( 'x-pop-out', class extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<button id="Btn">pop</button>`

        this.querySelector( 'button' ).onclick = () => {
            this.dispatchEvent( new CustomEvent( 'pop' ) )
            if ( this.onpop )
                this.onpop()
            else
                eval( this.getAttribute( 'onpop' ) )
        }            
    }
} )

XPO.addEventListener( 'pop', () => console.info( 'pop' ) )

<x-pop-out id=XPO onpop="console.log( 'onpop attribute' )"></x-pop-out>
<hr>
<button onclick="XPO.onpop = () => console.log( 'onpop override' )">redefine onpop</button>