从 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

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

input.addEventListener('click', onclick);

Answer 2

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

Answer 3

解决方案原来是使用 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 + '})');
// ...

从 JavaScript 字符串设置元素 onclick

Set element onclick from JavaScript string

html

javascript

dom

onclick

typescript