自定义元素不会触发内联自定义事件

Question

我尝试使用以下代码从自定义元素中捕获内联自定义事件。我在日志上只有 'external success'，从来没有 'inline success'。

有什么想法吗？谢谢。

注意：我也尝试用 HTMLDivElement/is 替换 HTMLELElement：相同的结果

customElements.define(
'test-it',class extends HTMLElement {
  connectedCallback() {
    this.children[0].addEventListener('click', e=>this.dispatchEvent(new CustomEvent('testevent', {detail:'test'})))
  };
}
);

document.getElementsByTagName('test-it')[0].addEventListener('testevent', ()=>{console.log('external success')});

<test-it id="test" ontestevent="console.log('inline success');">
  <div>Minimal test</div>
</test-it>

Answer 1

感谢 BOZ，可与以下添加一起使用，但自定义事件 详细信息 已丢失（代码已更新）。

if ( this.ontestevent ) this.ontestevent(); else eval(this.getAttribute('ontestevent'));

customElements.define(
'test-it',class extends HTMLElement {
  connectedCallback() {
    this.children[0].addEventListener(
      'click', 
      e=>{
        this.dispatchEvent(new CustomEvent('testevent', {detail:'test'}));
        if ( this.ontestevent ) this.ontestevent(); else eval(this.getAttribute('ontestevent'));
    })
  };
}
);

document.getElementsByTagName('test-it')[0].addEventListener('testevent', (e)=>{console.log('external success:'+e.detail)});

<test-it ontestevent="console.log('inline success:'+e.detail);">
  <div>Minimal test</div>
</test-it>

Answer 2

testevent 不是有效的 HTML5 全局事件处理程序：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers

这意味着 ontestevent="..." 只是一个属性而不是一个 onEvent 处理程序。

您可以不自己创建这样的处理程序。

这就是创建 addEventListener 的原因

PS。对于您未来的 Web Components 冒险：从 inside shadowDOM 发送事件（您现在没有使用）需要 composed:true for CustomEvents to escape shadowDOM

自定义元素不会触发内联自定义事件

Custom Elements do not fire inline custom events

javascript

inline

custom-events

custom-element