Question

我正在使用Javascript创建HTML DOM元素（是的，我知道它很讨厌）我可以创建select元素，但是我无法添加onchange属性。

示例：

var sel = document.createElement('select');
sel.id = 'someID';
sel.title = 'Some title';
sel.style.fontWeight = 'bold';
sel.size = 1;

一旦我添加了选项并完成了 document.getElementById('someOtherID').appendChild(sel);
我得到了我的选择元素。

我想要做的是，在A上面，添加：
sel.onChange = 'someJavascriptFunction()';
但它不喜欢它。

我应该在广场之外思考吗？哪一个？

Answer 1

事件名称应为小写，您需要指定一个函数而不是字符串。

sel.onchange = someJavascriptFunction;

如果还有更多工作要做，可以指定一个匿名函数。

              //  v----assign this function
sel.onchange = function() {
    // do some work
    someJavascriptFunction();  // invoke this function
};

Answer 2

你应该这样做：

sel.onChange = someJavascriptFunction;

（注意someJavascriptFunction之后没有任何parens。这意味着你附加了函数，而不是函数的调用。

Answer 3

如果您有可能将多个函数绑定到该事件，您将需要使用这个稍微冗长的方法。

if (sel.addEventListener) {
    sel.addEventListener('change', changeFunction, false);
} else if (sel.attachEvent) {
    sel.attachEvent('onchange', changeFunction);
} else {
    sel.onchange = changeFunction;
}

Answer 4

完成整个过程的更简单方法是：在页面中的某个位置：

＆lt; div id = someContainer＆gt;＆lt; / div＆gt;

然后在你的javascript中执行此操作：

document.getElementById（'someContainer'）。innerHTML =“＆lt; select id = someId title ='some title'size = 1 style ='font-weight：bold'onchange ='someJavascriptFunction（）'＆gt;”;

或更慢：

var html =“＆lt; select id = someId title ='some title'size = 1 style ='font-weight：bold'onchange ='someJavascriptFunction（）'＆gt;”;

var someContainer = document.getElementById（'someContainer'）;

someContainer.innerHTML = html;

document.getElementById（）是如此常见，你可能有像jquery或prototype这样的库，它更容易像$（'someContainer'）那样做，或者为你自己定义它（var $ = document.getElementById;）。

innerHTML是每个dom元素上的一个伪变量，它返回或设置你执行它的元素的所有html INSIDE。你可以任意传递它长HTML，如果你想要整个页面。你可以写一个狡猾的程序来构建html文本，他们甚至还有像hogan这样的模板系统（google it）。

在Javascript中创建HTML DOM select元素并具有onchange事件

4 个答案: