在动态创建的元素中包含参数的事件处理程序

Event handler with parameters in dynamically created elements

本文关键字：参数 事件处理 程序 包含 元素 动态 创建      更新时间：2023-09-26

当我分配不带参数的事件处理程序时，它工作：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');

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

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

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

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

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

你必须创建自己的闭包：

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

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

尝试：

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

或：

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

如果要在 show 函数中保留元素对象上下文

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

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

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

这就是为什么当您加载页面时，它会提醒"工作"（调用该函数），但是当您单击该按钮时，不会调用任何函数。

然后，您需要一个函数。

您可以声明它：

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

或者您可以使用匿名的：

myButton.onclick=function(){
   show('test')
}
相关文章：