JS动态创建DOM绑定onclick回调时如何避免使用全局变量？

你原来的写法错误点在于：通过setAttribute设置onclick属性时，属性值会被解析为字符串，传入的callback函数会被强制转为字符串形式，丢失了原有的函数引用，因此funcTwo接收到的只是函数的字符串内容，无法作为函数执行。同时字符串拼接的方式如果name参数包含单引号等特殊字符，还会触发语法错误。

直接通过DOM元素的onclick属性绑定事件处理函数，利用闭包特性直接获取作用域内的name和callback变量，不需要转为字符串，也不需要全局变量：

function funcOne(name,callback) {
    let button = document.createElement("button");
    button.id = "myBtn";
    button.innerHTML = "Go to Func 2";
    // 直接绑定事件处理函数，使用闭包访问外部变量
    button.onclick = function() {
        funcTwo(this, name, callback);
    };
    document.body.appendChild(button);
}

function funcTwo(element,name,callback) {
    let elementId = element.id;
    let yourName = name;
    console.log(yourName);
    callback();
}

funcOne('John',function(){alert('Holly cow!');});

如果需要支持给同一个按钮绑定多个点击事件，可以使用addEventListener方法，效果一致：

button.addEventListener('click', function() {
    funcTwo(this, name, callback);
});

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