香草Web组件自定义事件属性和属性

触觉数据

使用不带任何框架的Web组件,实现自定义事件的正确方法是什么?例如,假设我有一个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()从属性执行字符串的适当方法吗?

超锐利

事件侦听器解决方案(第三个)是最简单的,因为你没有定义任何特殊赶上事件。

事件处理程序的解决方案需要做的eval()(第一个,从属性)或明确地调用fonction(第二个)。

如果不能使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章