使用JavaScript将事件添加到按钮

Question

在此页面中，有一种方法可以动态添加文本框、输入按钮和单选按钮元素的javascript代码。

我的问题是如何向按钮添加事件，想象一下我只想创建按钮，而不是文本框或单选按钮。 更新
我遇到了一些问题...我尝试了提供的一些解决方案，但它会导致我出现问题，让我试着解释一下...

我正在尝试打开XML文件，读取它并创建具有XML属性的HTML对象，目前为止还不错，但如果我尝试添加事件，xmlObj就会为空，有什么建议吗？

我有这个...

script = "function OnClientDragEnd(dock, args)" + 
                         "   {" + 
                                "var hidd = document.getElementById('" + HiddenField1.Value + "');" + 
                                "hidd.value = dock.get_id();" + 
                    //"alert(hidd.value);" + 
                                "var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');" + 
                                "xmlDoc.async = 'false';" + 
                                "xmlDoc.load('Config.xml');" + 
                                "xmlObj = xmlDoc.documentElement;" + 
                                "if (xmlObj.childNodes.length>0)" + 
                                "{" + 
                                "   for (var i = 0; i < xmlObj.childNodes.length; i++)" + 
                                "   {" + 
                                "       if (xmlObj.childNodes(i).getElementsByTagName('Id')[0].text == hidd.value){" + 
                                "           var txtTb2 = document.getElementById('" + TextBox4.ClientID + "');" + 
                                "           txtTb2.value = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].text;" + 
                                "           y = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].nextSibling;" + 
                                "           yy = xmlObj.childNodes(i).getElementsByTagName('Titulo')[0].previousSibling;" + 
                    //"           alert(y.nodeName);" + 
                                "           for(i=0;i<yy.text;i++){" + 
                                "               alert('aa');" + 
                                "               var tbox = document.createElement('input');" + 
                                "               tbox.setAttribute('type', 'text');" + 
                                "               tbox.setAttribute('value', y.text);" + 
                                "               tbox.setAttribute('name', 'name');" + 
                                "               var abcd = document.getElementById('spanObjDock');" + 
                                "               abcd.appendChild(tbox);" + 
                                "               var bt1 = document.createElement('input');" + 
                                "               bt1.setAttribute('name', 'mais');" + 
                                "               bt1.setAttribute('value', '+');" + 
                                "               bt1.setAttribute('type', 'button');" + 
                                "               bt1.onclick = function (){alert('Clicked!');};" + //--> this dont work 
                                //"               bt1.setAttribute('Click','addRadioButton()');" + //--> and this dont work 
                                "               abcd.appendChild(bt1);" + 
                                "               var bt2 = document.createElement('input');" + 
                                "               bt2.setAttribute('name', 'menos');" + 
                                "               bt2.setAttribute('value', '-');" + 
                                "               bt2.setAttribute('type', 'button');" + 
                                "               abcd.appendChild(bt2);" + 
                                "               var break1 = document.createElement('br');" + 
                                "               abcd.appendChild(break1);" + 
                                "               node = y;" + 
                                "               y=y.nextSibling;" + 
                                "           }" + 
                                "           break;    " +//<input type="button" onclick="" name"as" /> 
                                "       }" + 
                                "   }" + 
                                "}" + 
                            "}";//+ 

- SlimBoy

Answer 1

简单地说，使用addEventListener方法：

buttonRef.addEventListener("click", function() {
    alert("Blah blah...");
}, false);

（你需要通过Google找到跨浏览器的解决方案。IE不支持 addEventListener）

其中buttonRef是对按钮的引用。如何获取该引用？有很多方法可以做到这一点。您可以使用document.getElementById()或此“家族”中的任何其他方法。

- Crozin

---

它可以工作了！我遇到了一些困难，无论我添加什么，都会收到xmlObj为空的错误，但是我重新启动了VS2008并关闭了一些窗口，它就开始工作了。谢谢！！ - SlimBoy

找到了这个链接，对我很有帮助https://developer.mozilla.org/En/DOM:element.addEventListener - SlimBoy

IE 9实际上支持addEventListener ref. - another

Answer 2

var element = document.createElement("input");
element.onclick = function() {alert('Clicked!');};

- Max Shawabkeh

---

竟然被你比了一秒钟，真倒霉...我不该加那个额外的例子！ - Andy E

实际上，我们的帖子时间戳完全相同。 :D - Max Shawabkeh

Answer 3

可能最简单的跨浏览器方法是将事件名称设置为元素的属性：

Element.onclick = function () 
{
   // do something...
}
Element.onmouseup = function () 
{
   // do something else...
}

- Andy E

Answer 4

在创建DOM元素时，您需要附加新事件。

例如：

var e = document.createElement('input');
e.onclick = function()
            {
               alert('Test');
            };

- Boris Guéry