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

Question

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

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

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

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

第一个例子之所以不起作用，是因为函数自动运行，无需等待点击。

如何提供 onClick 参数？

Answer 1

您可以使用匿名函数这样做。

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

Answer 2

首先，请注意它是 onclick，而不是 onClick。两者都适用于主流浏览器，但前者是正确的大写形式。（参见 HTML 规范中的 here and 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 值以及传递给它的参数。

Answer 3

你可以在 JavaScript 中使用 addEventListener 做得很好。 HTML5 data-属性和 DOMStringMap 可用于进一步扩展它。

下面的代码片段应该让您清楚地了解如何将参数与任何 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>

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

How to add arguments to onclick in javascript?

javascript

arguments

onclick