使用javascript向按钮添加事件答案

【问题标题】：Add event to button with javascript使用javascript向按钮添加事件
【发布时间】：2010-02-04 13:28:27
【问题描述】：

在此页面中，有一种方法可以 dynamic add html (textbox,input button and radio elements with 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" /> 
                                "       }" + 
                                "   }" + 
                                "}" + 
                            "}";//+

【问题讨论】：

标签： javascript html

【解决方案1】：

简单地说，使用addEventListener方法：

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

（你必须谷歌才能获得跨浏览器的解决方案。IE 不支持addEventListener）

buttonRef 是对按钮的引用。你怎么能得到那个参考？有很多方法可以做到这一点。您可以使用document.getElementById() 或此“家庭”中的任何其他方法。

【讨论】：

有效！我有一些困难，我最终添加的任何内容，我收到 xmlObj 为空的错误，但我重新启动 VS2008 关闭一些窗口并开始工作。谢谢！！
发现这个链接对developer.mozilla.org/En/DOM:element.addEventListener有帮助
IE 9 实际上支持addEventListener ref。

【解决方案2】：

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

【讨论】：

厄运！该死，比我多一秒钟……不应该放那个额外的例子！
实际上，我们两个帖子的时间戳似乎完全相同。 :D

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您必须在创建 DOM 元素时附加新事件。

例如：

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

【讨论】：