使用不带任何框架的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] 删除。
我来说两句