пользовательская функция обратного вызова события веб-компонента в теге

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() запускался, если я опускаю функцию документа eKey(), я получил функцию eKey() undefined


javascript native-web-component
person محمد ربيع الشيخة    schedule 27.02.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

onclick будет работать только с глобально определенными функциями.

Вот очень быстрый прием, позволяющий использовать функцию класса.

// 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 как способ захватить все элементы, которым нужен обработчик кликов, затем я беру значение этого атрибута, использую его в качестве имени функции класса и передаю его в функцию addEventListener.

person Intervalia    schedule 27.02.2019
comment
так и что я должен поместить аргумент, например, on-click=ekey(x,y,z) специально, когда я хочу, чтобы [this0] был частью аргумента, где [this0] является указателем подэлемента - person محمد ربيع الشيخة; 28.02.2019

arrow_upward
1
arrow_downward

В качестве альтернативы ответу @Intervalia вы можете использовать метод getRootNode(), а затем свойство host для доступа к объекту Custom Element из Shadow 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>

Обратите внимание, что всегда полезно использовать встроенные скрипты, потому что в некоторых ситуациях их можно отключить (по соображениям безопасности).

person Supersharp    schedule 28.02.2019