如何在javascript中为onclick添加参数？答案

【问题标题】：How to add arguments to onclick in javascript?如何在javascript中为onclick添加参数？
【发布时间】：2015-11-03 07:32:11
【问题描述】：

基本上，当按下按钮时，我希望为其提供一个参数，但这不起作用：

var button = document.getElementById("button");
button.onClick = doThis(arg);

但这确实有效（没有参数）：

var button = document.getElementById("button");
button.onClick = doThis;

第一个例子不起作用的原因是因为函数自动运行而不等待点击。

如何提供 onClick 参数？

【问题讨论】：

标签： javascript onclick arguments

【解决方案1】：

首先，请注意它是onclick，而不是onClick。两者都适用于主流浏览器，但前者是正确的大小写。（参见 HTML 规范中的 here 和 here，包括代码示例。）

你有几个选择：

使用Function#bind：
```
button.onclick = doThis.bind(button, arg);
```
Function#bind 创建一个新函数，在调用该函数时，将使用特定的 this 值（在我们的例子中为第一个参数，button）和您给它的任何参数（后跟任何参数新函数被调用）。
使用包装函数：
```
button.onclick = function() { doThis(arg); };
```
不过，在上述情况下，doThis 中的 this 将不是按钮。如果您愿意，可以使用Function#call：
```
button.onclick = function() { doThis.call(button, arg); };
// or
button.onclick = function() { doThis.call(this, arg); };
```
Function#call 调用一个函数，指定要使用的 this 值以及要传递给它的参数。

【讨论】：

【解决方案2】：

你可以像这样使用匿名函数。

document.getElementById("button").onClick = function() { doThis(arg); };

【讨论】：

这正是我一直在寻找的，尽管它看起来有点奇怪。谢谢！
不知道。但是@OP，我肯定会接受 T.J 的回答，因为它比我自己的要完整得多。

【解决方案3】：

您可以在JavaScript 中使用addEventListener 做得很好。 HTML5 data-attributes 和 DOMStringMap 可以用来进一步扩展它。

下面的代码 sn-p 应该让您清楚地了解使用任何 HTMLDomEvents 的参数。

el.addEventListener('click', function(e) {
  performAction(e, this);
});

var elContainer = document.querySelector('#myDiv');
var el = document.querySelector('#searchNow');

el.addEventListener('click', function(e) {
  performAction(e, this);
});

function performAction(e, thatObj) {
  var str = '' + e.type + '\n';
  for (x in thatObj.dataset) {
    str += x + ': ' + thatObj.dataset[x] + '\n';
  }

  console.log(e.type + thatObj.dataset);
  elContainer.innerHTML += str;

}

#myDiv {
  margin: 5px 0;
  padding: 5px;
  border: 1px solid #CCC;
}

<div id="myDiv">
  My DIV...
  <br/>
</div>

<button name='search' id='searchNow' data-propertiesObject='{a: "XYZ", b: "ABC"}'>Search Now!</button>

【讨论】：