javascript 带参数的onclick赋值函数

wpcxdonn  于 2023-06-04  发布在  Java
关注(0)|答案(6)|浏览(122)

我不知道以前有没有人问过这个问题,因为我不知道它叫什么。
但为什么这样的方法行不通呢?下面只是一个一般的例子

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

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

</script>

如果事件处理程序不带参数,上面的代码可以正常工作,但如果带参数,则无法工作。我想我在网上读到过,要克服这个问题,可以使用闭包。我假设这是因为括号()立即调用函数而不是将其分配给事件?

fdx2calv

fdx2calv1#

因为你是立即调用函数并返回结果,而不是引用它。
当添加括号时,调用函数并将结果传递回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);
umuewwlo

umuewwlo2#

最简单的方法是:

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

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

kgsdhlau3#

当你说onClick = function(){...}时,你正在向一些内部JavaScript库注册你的函数。因此,当“点击”发生时,该库调用您的函数。
现在假设您是该库的作者,并且有人在其中注册了他们的函数。你怎么知道有多少参数传递给函数?你怎么知道要传入什么样的参数?

clickie(argument1,argument2)

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

clickie

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

ylamdve6

ylamdve64#

要将事件绑定到元素,需要使用attachEventaddEventListener方法。举个例子。

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

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

ghhkc1vu5#

后面跟有圆括号的函数名被解释为函数调用或函数声明的开始。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属性。希望这能帮上忙。

4szc88ey

4szc88ey6#

一个老问题有很多正确的答案,但只是为了添加一个现代的方法来创建一个匿名函数来做到这一点:

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

相关问题