如何不使用eval实现自定义内联事件属性的触发？

你需要让自定义的onclack属性和clack事件像原生onclick/click那样工作，且不使用eval，可以通过以下方式实现：

单元素处理示例 #

<div id='clacker' onclack='alert("clacked")'>clacker</div>
<script>
// 为目标元素绑定自定义clack事件
$('#clacker').on('clack', function() {
  const eventCode = this.getAttribute('onclack');
  if (eventCode) {
    // 用Function构造函数执行内联代码，模拟原生事件行为
    new Function(eventCode).call(this);
  }
});

// 触发clack事件
$('#clacker').trigger('clack');
</script>

批量处理所有带onclack属性的元素 #

如果页面中有多个需要绑定的元素，可以批量处理：

// 给所有带onclack属性的元素绑定clack事件
$('[onclack]').on('clack', function() {
  const eventCode = this.getAttribute('onclack');
  if (eventCode) {
    new Function(eventCode).call(this);
  }
});

// 触发任意元素的clack事件即可生效
$('#clacker').trigger('clack');

逻辑说明 #

• new Function(eventCode)会创建一个独立的函数执行上下文，代码运行在全局作用域，和原生内联事件的执行逻辑完全一致。
• 通过.call(this)确保函数内的this指向当前触发事件的元素，和onclick中this的行为匹配。
• 这种方式避免了eval带来的安全风险，同时实现了你需要的简易自定义内联事件效果。

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