Vanilla JS可复用动态函数问题：动态action参数无法生效

你当前写法里的focusEl.${action}是无效的JavaScript语法，JS不支持这种直接把字符串拼接成属性赋值语句的方式。这里给你两种靠谱的解决方案：

方案1：传递函数作为Action参数（推荐） #

这是最灵活、安全的实现方式，直接让action成为一个接收元素为参数的函数，遍历元素时执行该函数即可。

修改后的代码：

const button = document.querySelector("#button");
const items = document.querySelectorAll(`*[id^="eventHandlerCreatedItem"]`); 

const eventHandler = (refEl, event, focusEls, action) => {
    refEl.addEventListener(event, () => {
        focusEls.forEach(action);
    });
};

// 调用时传入自定义操作函数
eventHandler(button, "click", items, (el) => {
    el.style.backgroundColor = "orange";
});

这种方式的优势在于，你可以在action函数里执行任意逻辑——不止是设置背景色，还能添加类名、修改文本内容等，复用性拉满。

方案2：拆分属性路径与值 #

如果一定要用字符串形式传递属性信息，可以把属性路径和对应的值分开传递，再通过解析路径完成赋值：

const button = document.querySelector("#button");
const items = document.querySelectorAll(`*[id^="eventHandlerCreatedItem"]`); 

const eventHandler = (refEl, event, focusEls, propPath, value) => {
    refEl.addEventListener(event, () => {
        focusEls.forEach((focusEl) => {
            const pathSegments = propPath.split('.');
            let target = focusEl;
            // 遍历到目标属性的父级对象
            for (let i = 0; i < pathSegments.length - 1; i++) {
                target = target[pathSegments[i]];
                if (!target) return; // 中间属性不存在则停止执行
            }
            // 给目标属性赋值
            target[pathSegments.at(-1)] = value;
        });
    });
};

// 调用时传入属性路径和对应值
eventHandler(button, "click", items, "style.backgroundColor", "orange");

不推荐的方案：使用eval #

虽然可以用eval(focusEl.${action})让你的原代码生效，但eval会执行任意传入的字符串代码，存在严重安全风险——如果action内容来自用户输入，很容易被注入恶意代码，因此强烈不建议使用。

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