从 JavaScript 字符串设置元素 onclick

Question

我有一些代码可以生成类似这样的 HTML：

function foo(onclick:string):HTMLElement {
    return parseHTML('<input type="button" onclick="' + escapeHTML(onclick) + '" />');
}

我想迁移到这样的代码：

function foo(onclick:string):HTMLElement {
   var input = document.createElement('input');
   input.type = 'button';
   input.onclick = onclick; // <= is this correct?
   return input;
}

除了我应该使用真正的 JavaScript 函数而不是代码字符串这一事实之外，使用传递的 JavaScript 字符串设置 onclick 属性的正确方法是什么，以便它的工作方式与使用onclick 属性生成 HTML？

编辑：

上面代码设置的input.onclick属性应该是一个真正的JavaScript函数对象，而不是一个JavaScript字符串（根据Mozilla docs）所以上面的代码是不正确的。

我正在尝试更改foo() 的实现而不需要更改用法。他们需要能够继续传递 JavaScript 字符串。

Answer 1

解决方案原来是使用Function构造函数将JavaScript字符串转换为具有单个参数的函数对象：

function foo(onclick:string):HTMLElement {
    var input = document.createElement('input');
    input.type = 'button';
    input.onclick = new Function('event', onclick);
    return input;
}

这为传递的 JavaScript 代码提供了与编写在 HTML 中的 onclick="..." 属性中完全相同的环境：

• event 变量将设置为适当的 Event 对象
• arguments 将包含一个参数，即Event 对象
• this 对象将是 HTML 元素本身
• 代码将在其自己的作用域中运行，作用域链中的下一个全局作用域

解决方案来自http://perfectionkills.com/global-eval-what-are-the-options/

这也可以：

// ...
input.onclick = (1,eval)('(function(event){' + onclick + '})');
// ...

Answer 2

最好使用addEventListener 附加处理程序，因为它支持同一事件的多个处理程序，并且可用于侦听任何事件type（甚至是自定义事件，如 "myAwesomeNewEvent" )

input.addEventListener('click', onclick);

Answer 3

onclick参数必须是函数对象

function foo(onclick){
   var input = document.createElement('button');
   input.type = 'button';
   input.onclick = onclick; // <= is this correct?
   return input;
}

然后你就可以使用了

var a = function(){alert("Test");};
document.getElementById('container').appendChild(foo(a));