пользовательский элемент, пользовательские атрибуты обработчика событий - PullRequest
Новая
       13

пользовательский элемент, пользовательские атрибуты обработчика событий

0 голосов
/ 02 февраля 2020

Встроенные в браузер элементы имеют атрибуты событий, которые выполняются произвольно javascript, как описано ниже

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

Есть ли способ создать пользовательский элемент с похожим поведением пользовательское событие атрибут обработчика, и есть ли для этого стандартный шаблон? Где {some custom eventType} = "{some code}" выполняется с правильными значениями в Область и область привязки установлены правильно. 

<some-custom-element oncustomevent="alert('worked')" />

1 Ответ

1 голос
/ 02 февраля 2020

Первый вопрос: вы действительно хотите разрешить выполнение кода из строки? Потому что это требует eval()

Нет ничего плохого в использовании eval() , когда вы понимаете последствия :

Динамический триггер c (строка) код:

  • из атрибута пользовательского элемента onevent
  • из пользовательского элемента настройки элемента onevent
  • из пользовательского события onevent деталь (см. connectedCallback) 

  function triggerEvent(name, code = "console.warn('No code parameter')") {
    console.log(name, this);
    if (this === window) console.warn('no element scope');
    try {
      if (typeof code === "string") eval(code);
      else console.warn("code is not a string")
    } catch (e) { console.error(e) }
  }
  customElements.define("my-element", class extends HTMLElement {
    static get observedAttributes() {
      return ['onevent'];
    }
    constructor() {
      super();
      this.onclick = () => triggerEvent.call(this, "element Click", "console.log('from element click')");
    }
    connectedCallback() {
      document.addEventListener("onevent", evt => {
        triggerEvent.call(this, "EventListener", evt.detail);
      })
    }
    attributeChangedCallback(name, oldValue, newValue) {
      if (name === "onevent") {
        triggerEvent.call(this, "attributeChangedCallback", newValue);
      }
    }
    set onevent(newValue) {
      triggerEvent.call(this, "setter", newValue);
    }
  });

  setTimeout(() => document.dispatchEvent(new CustomEvent("onevent", {
      detail: "console.log('from dispatchEvent detail')"
    })), 2000); //execute after elements listen
<my-element onevent="console.log('from element attribute')">click my-element</my-element>
<button onclick="document.querySelector('my-element').onevent='console.log(&quot;from button&quot;)'"
>Call setter</button>

JSFiddle игровая площадка по адресу: https://jsfiddle.net/CustomElementsExamples/s9jm72nf/

...