如何在不使用Javascript调用参数的情况下将参数传递给引用函数

Question

I want my code to be something like el.onclick = someFunc(arg) , however, someFunc is invoked on load. How would I go about passing an argument to a function that I want to reference, without also invoking it?

Answer 1

Try using the addEventListener to add the event click. The addEventListener method attaches an event handler to the specified element. You need to pass the callback, which would be invoked when the event occurs.

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

Answer 2

You can do this in following 3 ways,

1. Using 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. Using onclick and 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. Using onclick and function wrapper,

 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 : Option 1 with addEventListener is the best one to use among the options above but other options (1 & 2) can be considered in case of option 1 is not doable.

For an instance, you can use onclick and bind when you need to reuse the same method for multiple elements and have to use the element inside the method with this as below.

 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>