标签中的自定义 web 组件事件回调函数

Question

class UioKey extends HTMLElement {
 ...
 eKey(){windows.alert('class  eKey function')}
 
 
 }
 
 function eKey(){
 eKey(){windows.alert('document eKey function')}

<template id="uio-key-temp">
    <div class="uio-key">
         <div class="i" onclick="eKey()"></div><span></span>
    </div>
</template>

当点击 .i 时 div 得到了正在触发的文档 ekey，我想要 class ekey() 被解雇如果我省略了 dodument eKey() 函数，我得到了函数 eKey() undefined

Answer 1

onclick 仅适用于全局定义的函数。

这是一个非常快速的 hack，它允许您使用 class 函数。

// Class for `<uio-key>`
class UioKey extends HTMLElement {
  constructor() {
    super();

    let shadow = this.attachShadow({mode: 'open'});
    shadow.innerHTML = '<div><div on-click="eKey">div</div><span>span</span></div>';
    let a = shadow.querySelectorAll('[on-click]');
    a.forEach(
      el => {
        const handlerName = el.getAttribute('on-click');
        el.addEventListener('click', this[handlerName]);
      }
    );
  }

  eKey() {
    window.alert('class  eKey function');
  }
}

// Define our web component
customElements.define('uio-key', UioKey);

<hr/>
<uio-key></uio-key>
<hr/>

我使用自定义属性 on-click 作为获取所有需要点击处理程序的元素的方法，然后我获取该属性的值并将其用作 class 函数名称并传递它进入 addEventListener 函数。

Answer 2

对于@Intervalia 的回答，您可以使用getRootNode() 方法然后使用host 属性从阴影DOM 内部访问自定义元素对象。

class UioKey extends HTMLElement {
  constructor() {
    super()
    this.attachShadow( { mode: 'open' } )
        .innerHTML = uio-key-temp.innerHTML
  }
  eKey(){ 
    window.alert('class eKey function' ) 
  }
}
customElements.define( 'uio-key', UioKey )

<template id="uioKeyTemp">
    <style> .i { background: gray ; height: 10pt } </style>
    <div class="uio-key">
         <div class="i" onclick="this.getRootNode().host.eKey()"></div>
    </div>
</template>
<uio-key></uio-key>

请注意，使用内联脚本始终是一个好习惯，因为在某些情况下它们可以被禁用（出于安全原因）。

标签中的自定义 web 组件事件回调函数

custom web component event call back function in tag

javascript

native-web-component