我如何通过使用JavaScript调用参考函数来引用参考函数

Question

我希望我的代码像 el.onclick = someFunc(arg)之类的东西，但是，在加载时会调用Somefunc。我将如何将论点传递给我要引用的函数，而也不调用它？

Answer 1

尝试使用addEventListener单击事件。addEventListener方法将事件处理程序附加到指定元素。您需要传递回调，该回调将在事件发生时被调用。

movieElement.addEventListener("click", function(){
    showDescription(arg);
});

Answer 2

您可以通过以下三种方式进行此操作，

1. 使用addEventListener

var elm = document.getElementById('testButton');
elm.addEventListener('click', function(){
    someFunc('testArg');
});
function someFunc(arg) {
  console.log(arg);
}

<input id="testButton" type="button" value="Click"  />

2. 使用onclick和bind

function someFunc(arg) {
   console.log(arg);
}
var elm = document.getElementById('testButton');
elm.onclick = someFunc.bind(null, 'testArg');

<input id="testButton" type="button" value="Click" />

3. 使用onclick和功能包装器，

function someFunc(arg) {
  return function() {
    console.log(arg);
  }
}
var elm = document.getElementById('testButton');
elm.onclick = someFunc('testArg');

<input id="testButton" type="button" value="Click"  />

NOTE ：与addEventListener的选项1是在上述选项中使用的最佳选择，但可以在选项1的情况下考虑其他选项（1＆amp; 2）。

对于一个实例，您可以使用onclick和bind在需要对多个元素重复使用相同的方法时，并且必须在下面使用this中使用该方法中的元素。

var buttons = document.getElementsByTagName('input');
for(var i = 0; i < buttons.length; i++) {
   var button = buttons[i];
   button.onclick = someFunc.bind(button, 'testArg');
}
// Assume this function is in another file
function someFunc(arg) {
   console.log(this.id + ': '+ arg);
}

<div>
  <input id="testButton1" type="button" value="Click" />
  <input id="testButton2" type="button" value="Click" />
  <input id="testButton3" type="button" value="Click" />
  <input id="testButton4" type="button" value="Click" />
  <input id="testButton5" type="button" value="Click" />
</div>