如何在JavaScript中为绑定的函数指定自定义参数？

你可以通过以下几种常见方式实现给onclick绑定的函数传递参数：

1. 用匿名函数包裹调用 #

这是最直观的写法，通过匿名函数作为点击回调，在内部调用目标函数并传入参数：

return_btn = document.getElementById(bkid).querySelector(".returnbtn");
return_btn.onclick = function() {
  cancelReturn(bkid); // 直接传入需要的参数
};
return_btn.innerHTML = "Cancel";

点击按钮时，匿名函数会被执行，进而调用带参数的cancelReturn。

2. 使用bind()方法预设参数 #

bind()方法可以创建一个新函数，预设好目标函数的参数和上下文：

return_btn = document.getElementById(bkid).querySelector(".returnbtn");
// 第一个参数为this上下文（不需要的话传null或this），后续是要传递给cancelReturn的参数
return_btn.onclick = cancelReturn.bind(null, bkid);
return_btn.innerHTML = "Cancel";

点击时，新函数会自动带着预设的bkid参数调用cancelReturn。如果后续需要移除这个事件监听，要保存bind返回的函数引用，不能直接用cancelReturn。

3. 使用addEventListener绑定事件（推荐） #

addEventListener是更灵活的事件绑定方式，同样支持传参：

匿名函数方式 #

return_btn = document.getElementById(bkid).querySelector(".returnbtn");
return_btn.addEventListener('click', function() {
  cancelReturn(bkid);
});
return_btn.innerHTML = "Cancel";

bind方式 #

return_btn = document.getElementById(bkid).querySelector(".returnbtn");
const boundHandler = cancelReturn.bind(null, bkid);
return_btn.addEventListener('click', boundHandler);
// 若需移除监听，使用保存的引用：return_btn.removeEventListener('click', boundHandler);
return_btn.innerHTML = "Cancel";

这种方式允许给同一个元素绑定多个不同的点击处理函数，比直接赋值onclick更健壮。

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