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

Question

内置于浏览器中的元素具有事件属性，该属性执行如下所述的任意javascript

有没有办法创建具有类似行为的[[custom event处理程序属性的自定义元素，并且有这样做的标准模式吗？其中{some custom eventType} =“ {some code }“将在范围内使用正确的值执行，并且此绑定设置正确。

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

Answer 1

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

使用eval()没什么问题

当您了解其含义之后：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

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

来自自定义元素属性onevent

来自自定义元素设置器onevent

来自自定义事件onevent详细信息

  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/