用javascript将事件添加到按钮 [英] Add event to button with javascript

问题描述

在这个页面中，有一种方法可用于
动态添加HTML（文本框，使用javascript输入按钮和广播元素

我的问题是如何添加事件按钮，假设我只想创建按钮，而不是文本框或收音机元素。

更新

我在这里遇到了问题...我尝试了一些提供的解决方案，但它会导致我遇到问题，让我试着解释一下...

即时尝试打开xml文件，读取它并创建带有xml属性的html对象，到目前为止还不错，但是如果我尝试添加事件，xmlObj会传出null any ideias ??

  script =function OnClientDragEnd（dock，args）+ 
 {+ 
var hidd = document.getElementById（'+ H iddenField1.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;我< xmlObj.childNodes.length; （+）b $ b{+ 
if 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.create元素（'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（）{aler t（'Clicked！'）;};+ //  - >这不工作
 //bt1.setAttribute（'Click'，'addRadioButton（）'）; + //  - >这不工作
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 =buttononclick =nameas/> 
}+ 
}+ 
}+ 
}; // + 
   $ b 
解决方案
 简单地说，使用 addEventListener 方法：
 
 
  buttonRef.addEventListener（click，function（）{
 alert（Blah blah ...）; 
}，假）; 
  
（您必须为Google提供跨浏览器解决方案，IE不支持 addEventListener ）
 
 
 
其中 buttonRef 是对按钮的引用。你怎么能得到这个参考？有很多方法可以做到这一点。您可以使用 document.getElementById（）或此家庭中的任何其他方法。
 
In this page there's a way to 
dynamic add html (textbox,input button and radio elements with javascript

my questioon is how can i add an event to the button, imagine that i only want create the button, not the textbox or the radio element.

UPDATE

I'm having problems here... I have tried some of the solutions provided but it causes me problems, let me try to explain...

im trying to open xml file, read it and create html object with the properties of the xml, so far so good, but if i try to add the event, xmlObj cames null any ideias??

i have this...
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" /> 
                                "       }" + 
                                "   }" + 
                                "}" + 
                            "}";//+ 

解决方案
Simply, use addEventListener method:
buttonRef.addEventListener("click", function() {
    alert("Blah blah...");
}, false);
(You'll have to Google for cross-browser solution. IE doesn't support addEventListener)

Where buttonRef is a reference to button. How can you get that reference? There's lots of ways to do that. You can use document.getElementById() or any other method from this "family".

                        
这篇关于用javascript将事件添加到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！