onclick分配带参数的函数

时间:2014-06-05 02:03:36

标签: javascript function onclick

我不确定之前是否曾经问过这个问题,因为我不知道它叫什么。

但为什么这样的方法不会这样呢?以下只是一个例子

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

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

</script>

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

5 个答案:

答案 0 :(得分:12)

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

添加括号时,您调用该函数并将结果传递回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);
}

并且通常最好使用addEventListener来附加事件侦听器,但同样的原则适用,它是(没有参数)

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

或传递参数的匿名函数

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

答案 1 :(得分:2)

当你说onClick = function(){...}时,你正在用一些内部JavaScript库注册你的函数。所以当&#34;点击&#34;碰巧,那个库会调用你的函数。

现在假设你是该图书馆的作者,并且有人用它注册了他们的功能。你怎么知道要传递给函数的参数数量?你怎么知道要传递什么样的参数?

clickie(argument1,argument2)

这意味着调用该函数并返回其返回值。

clickie

这只是对函数的引用(不会调用/执行它)

答案 2 :(得分:2)

最简单的方法是:

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

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

答案 3 :(得分:0)

要将事件绑定到元素,您需要使用attachEventaddEventListener方法。例如。

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

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

答案 4 :(得分:0)

后跟括号的函数名称被解释为函数调用或函数声明的开头。需要将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属性。希望这会有所帮助。

相关问题