带参数的 onclick 分配函数答案

【问题标题】：onclick assigned function with parameters带参数的 onclick 分配函数
【发布时间】：2014-07-25 20:55:33
【问题描述】：

我不确定以前是否有人问过这个问题，因为我不知道它叫什么。

但是为什么这样的方法不起作用呢？下面只是一个一般的例子

<script>
document.getElementById('main_div').onclick=clickie(argument1,argument2);

function clickie(parameter1,parameter2){
 //code here
}

</script>

如果事件处理程序在没有参数的情况下被分配，上面的代码可以正常工作，但如果有参数，它就不起作用。我想我在网上看到要克服这个问题，你可以使用闭包。我假设这是因为括号 ( ) 立即调用函数而不是将其分配给事件？

【问题讨论】：

访问函数内的参数

标签： javascript function onclick

【解决方案1】：

因为您是立即调用函数并返回结果，而不是引用它。

添加括号时调用函数并将结果返回给 onclick

document.getElementById('main_div').onclick = clickie(); // returns undefined

所以其实等于写

document.getElementById('main_div').onclick = undefined;

这不是你想要的，你想要的

document.getElementById('main_div').onclick = clickie;

但是你不能传递参数，所以你也可以使用匿名函数

document.getElementById('main_div').onclick = function() {
    clickie(argument1,argument2);
}

或使用bind

document.getElementById('main_div').onclick = yourFunc.bind(this, [argument1, argument2]);

然而，通常最好使用addEventListener 来附加事件侦听器，但同样的原则也适用，它要么（不带参数）

document.getElementById('main_div').addEventListener('click', clickie, false);

或bind 或匿名函数来传递参数等。

document.getElementById('main_div').addEventListener('click', function() {
    clickie(argument1,argument2);
}, false);

【讨论】：

谢谢！现在很有意义。
在将函数分配给事件属性时声明不能传递参数是错误的。只需使用bind 即可，正如EgorTitov answer 正确显示的那样。

【解决方案2】：

最简单的方法是：

yourElement.onclick = yourFunc.bind(this, [arg1, arg2]);

function yourFunc (args, event) {
    // here you can work with you array of the arguments 'args'
}

【讨论】：

谢谢，我在找那个 ;) 我的错误是将事件默认参数放在第一个位置，在 args 之前。
这是正确的答案，因为完全可以将参数传递给绑定到具有bind 的事件属性的命名函数。

【解决方案3】：

当您说 onClick = function() {...} 时，您正在使用一些内部 JavaScript 库注册您的函数。因此，当“点击”发生时，该库会调用您的函数。

现在假设您是该库的作者，并且有人在其中注册了他们的函数。你怎么知道有多少参数传递给函数？你怎么知道要传入什么样的参数？

clickie(argument1,argument2)

这意味着调用函数并返回它的返回值。

clickie

这只是对函数的引用（不调用/执行它）

【讨论】：

【解决方案4】：

要将事件绑定到元素，您需要使用attachEvent 或addEventListener 方法。例如。

/* Non IE*/
document.getElementById('main_div').addEventListener('click', function () {}, false);

/* IE */
document.getElementById('main_div').attachEvent('onclick', function () {});

【讨论】：

【解决方案5】：

后跟括号的函数名被解释为函数调用或函数声明的开始。 a onclick 属性需要设置为函数对象。函数声明是一个语句，它本身不是一个函数。它不返回对该函数的引用。相反，它具有在全局范围内创建一个引用新函数对象的变量的副作用。

function clickie(param) { return true; }

创建一个名为 clickie 的全局变量，它引用一个函数对象。然后可以将该对象分配为事件处理程序，如下所示：element.onclick = clickie;。匿名函数声明（经常与闭包混淆；区别参见Closure vs Anonymous function (difference?)）确实返回一个函数对象，并且可以作为事件处理程序分配给一个属性，如下所示：

element.onclick = function(event) { return true; };

但这不起作用：

element.onclick = function clickie(event) { return true;};

为什么？因为function clickie(event) { return true;} 是一个语句，而不是一个函数。它不返回任何东西。所以没有任何东西可以分配给 onclick 属性。希望这会有所帮助。

【讨论】：