首页 新闻 赞助 找找看

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与脚本,业务就是给按钮绑定事件,删除按钮调用删除按钮的方法,编辑按钮调用编辑按钮的方法,但是这样写完后,发现点击删除按钮调用的是编辑按钮的方法,感觉是出现了方法覆盖的情况,请问各位大佬,这如何解决这样的情况

丨渊丨的主页 丨渊丨 | 初学一级 | 园豆:71
提问于:2022-03-23 18:04

经过查阅资料后,发现将var 修改为let ,方法正常调用,let _name let _callback let _operate_Arr

丨渊丨 2年前
< >
分享
最佳答案
0

使用for循环绑定事件的话,需要使用闭包来处理,不然,[i]执行的时候一直都是最后一个数字。

收获园豆:60
Rejiu泡泡糖 | 小虾三级 |园豆:632 | 2022-03-24 19:19

非常感谢

丨渊丨 | 园豆:71 (初学一级) | 2022-03-25 13:08
其他回答(2)
0

var rowButtons = [{ name: "delete", callback: deleteRow }, { name: "edit", callback: editRow }];

是这一段什么问题吗?
直接使用 onclick不可以吗?

人间春风意 | 园豆:2335 (老鸟四级) | 2022-03-23 19:25

这样声明回调感觉比较灵活 这样声明的话 在外部直接调用回调函数就ok

支持(0) 反对(0) 丨渊丨 | 园豆:71 (初学一级) | 2022-03-23 19:41
0

经过查阅资料后,发现将var 修改为let ,方法正常调用,let _name let _callback let _operate_Arr

丨渊丨 | 园豆:71 (初学一级) | 2022-03-23 19:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册