自定义元素，自定义事件处理程序属性

Question

内置浏览器元素具有事件属性，可以执行任意javascript，如下所述

有什么方法可以创建具有类似行为的自定义元素 自定义事件 处理程序属性，是否有这样做的标准模式？ 其中 {some custom eventType}="{some code}" 在范围内使用正确的值执行并且 this 绑定设置正确。

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

Answer 1

第一个问题是：您真的要允许从字符串执行代码吗？因为它需要eval()

使用 eval() 并没有错 当你理解其中的含义时:

触发动态（字符串）代码：

来自自定义元素属性 onevent
来自自定义元素 setter 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/

自定义元素，自定义事件处理程序属性

custom element, custom event handler attributes

custom-events

custom-element

触发动态（字符串）代码：