Question

当我分配没有参数的事件处理程序时，它可以工作：http://jsfiddle.net/mUj43/

function show(){
    alert('work');
}

var myButton = document.createElement("input");  
myButton.type="button";  
myButton.value="click";   
myButton.onclick=show;

var where = document.getElementById("where");
where.appendChild(myButton);

但是如果我传递参数，它就不起作用：http://jsfiddle.net/mUj43/1/

myButton.onclick = show('test');

如何在动态创建的元素中使用带参数的函数？

Answer 1

你不能这样做，你可以通过创建一个新函数来使用部分应用程序，然后将其作为事件处理程序附加：

myButton.onclick=show.bind( myButton, 'test');

http://jsfiddle.net/mUj43/2/

文档（我建议您阅读，因为此功能对许多其他内容也很有用）和兼容性信息：https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Answer 2

你必须创建自己的闭包：

myButton.onclick = function () {
    show.call(this, 'test');
};

你也可以使用@ Esailija的bind方法，但这个方法有更深入的浏览器支持。

Answer 3

尝试：

myButton.onclick = function(){show("test");}

或：

myButton.onclick = function(){ show.call( this, "test");}

如果要在show函数

中保留元素对象上下文

Answer 4

那是因为当你添加事件时，你需要一个函数引用。

在第一个示例中，show是对函数的引用。

在您的第二个示例中，show('test')是对函数show的调用，它不返回任何内容，并且没有任何内容不是函数引用。

这就是为什么当你加载页面时，它会警告“工作”（调用该函数），但是当你点击按钮时，不会调用任何函数。

然后，你需要一个功能。

您可以声明：

myButton.onclick=f;
function f(){
   show('test')
}

或者你可以使用匿名的：

myButton.onclick=function(){
   show('test')
}

事件处理程序，其中包含动态创建的元素

4 个答案: