如何将HTML元素属性值字符串转换为类似onclick的可执行函数

要实现像原生onclick那样解析并执行callback属性的代码，且不使用eval，可以利用Function构造函数模拟浏览器处理事件属性的逻辑——浏览器处理onclick这类属性时，本质是将字符串代码包装成全局作用域的函数执行，我们可以复刻这个行为：

核心思路 #

1. 获取callback属性的字符串代码
2. 使用Function构造函数将代码转为可执行函数（Function默认作用域为全局，和原生事件属性一致）
3. 触发回调时，将函数的this绑定到自定义元素实例，确保代码里的this指向当前元素

修改后的完整代码 #

class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.callbackFn = null;
  }

  connectedCallback() {
    const callbackCode = this.getAttribute('callback');
    if (callbackCode) {
      // 构造全局作用域的函数，若需传递事件参数可添加'event'作为参数
      this.callbackFn = new Function(callbackCode);
      
      // 示例：监听自定义事件触发回调，你可以替换成自己的特定事件
      this.addEventListener('trigger-callback', () => {
        // 绑定this为当前元素，确保代码中的this指向custom-element实例
        this.callbackFn.call(this);
        // 如果需要传递事件对象，改为：this.callbackFn.call(this, event);
      });
    }
  }

  // 示例：手动触发回调的方法，可根据你的业务逻辑调整触发时机
  triggerCallback() {
    this.dispatchEvent(new CustomEvent('trigger-callback'));
  }
}

customElements.define('custom-element', CustomElement);

使用说明 #

假设全局定义了change函数：

function change(element) {
  console.log('触发回调，元素：', element);
}

在HTML中使用自定义元素：

<custom-element callback="change(this)"></custom-element>

当触发trigger-callback事件（或你指定的特定事件）时，就会像原生onclick一样执行change(this)，this自动指向当前custom-element实例。

注意事项 #

• 代码运行在全局作用域，因此callback中调用的函数必须是全局可访问的
• 若需要传递额外参数，可修改Function的参数列表，比如new Function('arg1', 'arg2', callbackCode)，调用时传入对应参数
• 尽量避免在callback属性中写复杂逻辑，推荐调用全局函数保持代码可维护性

内容的提问来源于stack exchange，提问作者user24161494