为DOM元素添加JavaScript函数：点击事件失效问题排查与解决

问题出在哪 #

你把字符串'deleteFile("f")'赋值给了innerButtonDelete.onclick，这种写法只适合在HTML标签里写onclick="deleteFile('f')"的场景。通过JS DOM操作元素时，onclick属性需要接收函数对象，而不是字符串形式的代码，浏览器无法正确解析执行你赋值的字符串，所以点击事件触发不了。

正确实现方式 #

方式1：直接赋值匿名函数 #

let innerButtonDiv = document.getElementById("fi");
var innerButtonDelete = document.createElement("button");
innerButtonDelete.innerText = "Del";
// 用匿名函数包裹目标函数调用
innerButtonDelete.onclick = function() {
  deleteFile("f");
};
innerButtonDiv.appendChild(innerButtonDelete);

方式2：使用箭头函数（更简洁） #

如果需要传递动态参数，这种写法更方便：

let innerButtonDiv = document.getElementById("fi");
var innerButtonDelete = document.createElement("button");
innerButtonDelete.innerText = "Del";
// 箭头函数直接调用deleteFile
innerButtonDelete.onclick = () => deleteFile("f");
innerButtonDiv.appendChild(innerButtonDelete);

方式3：推荐用addEventListener绑定事件 #

这种方式支持给同一个元素绑定多个同类型事件，更灵活：

let innerButtonDiv = document.getElementById("fi");
var innerButtonDelete = document.createElement("button");
innerButtonDelete.innerText = "Del";
// 添加click事件监听
innerButtonDelete.addEventListener('click', function() {
  deleteFile("f");
});
innerButtonDiv.appendChild(innerButtonDelete);

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