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));

从JavaScript字符串设置元素onclick

3 个答案: