js 添加监听事件问题
0
悬赏园豆：60
[已解决问题]
解决于 2022-03-25 13:08
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td><button name="delete">删除</button></td>
<td><button name="edit">编辑</button></td>
</tr>
<tr>
<td><button name="delete">删除</button></td>
<td><button name="edit">编辑</button></td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
var rowButtons = [{ name: "delete", callback: deleteRow }, { name: "edit", callback: editRow }];
function deleteRow(rowObj) { console.log("调用了删除行方法" + rowObj); }
function editRow(rowObj) { console.log("调用了编辑行方法" + rowObj); }
_register_button_callback();
function _register_button_callback() {
for (var i = 0; i < rowButtons.length; i++) {
var _name = rowButtons[i].name;
var _callback = rowButtons[i].callback;
var _operate_Arr = document.getElementsByName(_name);
for (var j = 0; j < _operate_Arr.length; j++) {
_operate_Arr[j].addEventListener("click", function () {
var rowObj = this.parentNode.parentNode;
_callback(rowObj);
}, true);
}
}
}
</script>
这是我写好的html与脚本，业务就是给按钮绑定事件，删除按钮调用删除按钮的方法，编辑按钮调用编辑按钮的方法，但是这样写完后，发现点击删除按钮调用的是编辑按钮的方法，感觉是出现了方法覆盖的情况，请问各位大佬，这如何解决这样的情况
最佳答案
0
使用for循环绑定事件的话，需要使用闭包来处理，不然，[i]执行的时候一直都是最后一个数字。
收获园豆：60
非常感谢
其他回答(2)
0
var rowButtons = [{ name: "delete", callback: deleteRow }, { name: "edit", callback: editRow }];
是这一段什么问题吗？
直接使用 onclick不可以吗？
这样声明回调感觉比较灵活 这样声明的话 在外部直接调用回调函数就ok
0
经过查阅资料后，发现将var 修改为let ，方法正常调用，let _name let _callback let _operate_Arr
经过查阅资料后，发现将var 修改为let ，方法正常调用，let _name let _callback let _operate_Arr
– 丨渊丨 2年前