如何将表单输入的JavaScript代码绑定到DOM元素的事件监听器

要实现将用户输入的JS代码绑定为DOM元素的事件监听器，核心是把字符串形式的代码转换成可执行的函数，以下是修改后的完整代码：

import "./styles.css";

export default function App() {
  function handleFormSubmit(e) {
    e.preventDefault();
    // 获取表单输入值
    const formData = new FormData(e.target);
    const elementType = formData.get("element-type");
    const eventType = formData.get("event-listener");
    const code = formData.get("code");

    if (!elementType || !eventType || !code) return;

    // 创建DOM元素
    const newElement = document.createElement(elementType);
    // 给元素添加默认内容与样式，方便识别
    newElement.textContent = elementType === "button" ? "点击测试" : "新创建元素";
    newElement.style.padding = "8px 16px";
    newElement.style.border = "1px solid #ccc";
    newElement.style.margin = "10px";

    // 将用户输入的代码转换为可执行的事件处理函数
    // 函数默认接收事件对象`e`，用户代码中可直接使用该对象
    const eventHandler = new Function("e", code);

    // 绑定事件监听器
    newElement.addEventListener(eventType, eventHandler);

    // 添加到展示容器
    document.getElementById("display").appendChild(newElement);

    // 重置表单
    e.target.reset();
  }

  return (
    <div className="App">
      <form onSubmit={handleFormSubmit}>
        <label htmlFor="element-type">元素类型</label>
        <input type="text" name="element-type" placeholder="例如：button、div" />
        <br />
        <label htmlFor="event-listener">事件类型</label>
        <input type="text" name="event-listener" placeholder="例如：click、mouseover" />
        <br />
        <label htmlFor="code">执行代码</label>
        <textarea name="code" rows="7" cols="50" placeholder="例如：alert('触发事件！'); console.log(e)" />
        <br />
        <input type="submit" value="创建绑定元素" />
      </form>
      <div id="display"></div>
    </div>
  );
}

关键逻辑说明 #

1. 表单数据获取：通过FormData统一提取表单字段值，简化多输入项的取值流程。
2. 字符串转可执行函数：利用new Function("e", code)将用户输入的代码字符串包装为接收事件对象e的函数，确保用户代码能直接访问事件相关属性。
3. 事件绑定：使用标准的addEventListener方法，将转换后的函数绑定到目标元素的指定事件上。

安全警示 #

直接执行用户输入代码的方式存在代码注入、XSS攻击等高风险，仅适用于本地开发、内部测试等完全可控的场景，绝对不能用于生产环境或面向外部用户的系统。

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