javascript 带参数的 onclick 分配函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24050456/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick assigned function with parameters
提问by user3029001
I'm not sure if this has been asked before because I don't know what it's called.
我不确定之前是否有人问过这个问题，因为我不知道它叫什么。
But why wouldn't a method like this work? Below is just a general example
但是为什么像这样的方法不起作用呢？下面只是一个一般的例子
<script>
document.getElementById('main_div').onclick=clickie(argument1,argument2);
function clickie(parameter1,parameter2){
//code here
}
</script>
The code above would work fine if the event handler was assigned without parameters, but with parameters, it doesn't work. I think I read online that to overcome this problem, you could use closures. I'm assuming it's because of the parentheses ( ) that is calling the function immediately instead of assigning it to the event?
如果分配的事件处理程序没有参数，上面的代码可以正常工作，但是如果有参数，它就不起作用。我想我在网上读到要克服这个问题，你可以使用闭包。我假设是因为括号 ( ) 立即调用函数而不是将其分配给事件？
回答by adeneo
Because you're calling the function immediately and returning the result, not referencing it.
因为您正在立即调用该函数并返回结果，而不是引用它。
When adding the parenthesis you call the function and pass the result back to onclick
添加括号时，您调用该函数并将结果传递回 onclick
document.getElementById('main_div').onclick = clickie(); // returns undefined
so it's actually equal to writing
所以它实际上等于写作
document.getElementById('main_div').onclick = undefined;
which is not what you want, you want
这不是你想要的，你想要的
document.getElementById('main_div').onclick = clickie;
but then you can't pass arguments, so to do that you have to use an anonymous function as well
但是你不能传递参数，所以你必须使用匿名函数
document.getElementById('main_div').onclick = function() {
clickie(argument1,argument2);
}
and it's generally better to use addEventListener to attach event listeners, but the same principle applies, it's either (without arguments)
并且通常最好使用 addEventListener 附加事件侦听器，但同样的原则适用，要么（不带参数）
document.getElementById('main_div').addEventListener('click', clickie, false);
or the anonymous function to pass arguments
或匿名函数传递参数
document.getElementById('main_div').addEventListener('click', function() {
clickie(argument1,argument2);
}, false);
回答by EgorTitov
The easiest way is:
最简单的方法是：
yourElement.onclick = yourFunc.bind(this, [arg1, arg2]);
function yourFunc (args, event) {
// here you can work with you array of the arguments 'args'
}
回答by Martin Konecny
When you say onClick = function() {...} you are registering your function with some internal JavaScript library. So when the "click" happens, that library invokes your function.
当您说 onClick = function() {...} 时，您正在使用一些内部 JavaScript 库注册您的函数。因此，当“单击”发生时，该库会调用您的函数。
Now imagine you're the author of that library and someone registered their function with it. How would you know how many parameters to pass to the function? How would you know know what kind of parameters to pass in?
现在想象你是那个库的作者，有人用它注册了他们的函数。你怎么知道有多少参数传递给函数？你怎么知道要传入什么样的参数？
clickie(argument1,argument2)
This means to invoke the function and return its return value.
这意味着调用函数并返回其返回值。
clickie
This simply is a reference to the function (doesn't invoke/execute it)
这只是对函数的引用（不调用/执行它）
回答by lindsay
To bind an event to a element, you need to use either the attachEventor addEventListenermethod. For example.
要将事件绑定到元素，您需要使用attachEventoraddEventListener方法。例如。
/* Non IE*/
document.getElementById('main_div').addEventListener('click', function () {}, false);
/* IE */
document.getElementById('main_div').attachEvent('onclick', function () {});
回答by jtmanteo
A function name followed by parentheses is interpreted as a function call or the start of a function declaration. The a onclick property needs to be set to a function object. A function declaration is a statement, and is not itself a function. It doesn't return a reference to the function. Instead it has the side effect of creating a variable in the global scope that refers to a new function object.
后跟括号的函数名被解释为函数调用或函数声明的开始。a onclick 属性需要设置为函数对象。函数声明是一个语句，它本身不是一个函数。它不返回对函数的引用。相反，它具有在引用新函数对象的全局范围内创建变量的副作用。
function clickie(param) { return true; }
creates a global variable named clickie that refers to a function object. One could then assign that object as an event handler like so: element.onclick = clickie;. An anonymous function declaration (often confused with a closure; for the difference see Closure vs Anonymous function (difference?)) does return a function object and can be assigned to a property as an event handler, as follows:
创建一个名为 clickie 的全局变量，它引用一个函数对象。然后，可以分配一个对象，像这样的事件处理程序：element.onclick = clickie;。匿名函数声明（通常与闭包混淆；区别参见闭包与匿名函数（差异？））确实返回一个函数对象，并且可以作为事件处理程序分配给一个属性，如下所示：
element.onclick = function(event) { return true; };
But this doesn't work:
但这不起作用：
element.onclick = function clickie(event) { return true;};
Why? Because function clickie(event) { return true;}is a statement, not a function. It doesn't return anything. So there is nothing to be assigned to the onclick property. Hope this helps.
为什么？因为function clickie(event) { return true;}是一个语句，而不是一个函数。它不返回任何东西。所以没有什么可以分配给 onclick 属性。希望这可以帮助。
