Thêm sự kiện vào nút với javascript

Question

Trong trang này có một cách để dynamic add html (textbox,input button and radio elements with javascript

questioon của tôi là làm thế nào tôi có thể thêm một sự kiện vào nút, hãy tưởng tượng rằng tôi chỉ muốn tạo một nút, không phải là textbox hoặc radio thành phần.

CẬP NHẬT
tôi đang gặp vấn đề ở đây ... Tôi đã thử một số các giải pháp được cung cấp nhưng nó gây ra cho tôi vấn đề, hãy để tôi cố gắng giải thích ...

im cố gắng để mở file xml , đọc nó và tạo đối tượng html với các thuộc tính của xml, cho đến nay rất tốt, nhưng nếu tôi cố gắng thêm sự kiện, xmlObj cames null bất kỳ ideias ??

tôi có điều này ...

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" /> 
           "  }" + 
           " }" + 
           "}" + 
          "}";//+ 

Answer 1

đơn giản, sử dụng addEventListener phương pháp:

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

(Bạn sẽ phải sử dụng giải pháp đa trình duyệt của Google. IE không hỗ trợ addEventListener)

Trường hợp buttonRef là tham chiếu đến nút. Làm thế nào bạn có thể nhận được tham chiếu đó? Có rất nhiều cách để làm điều đó. Bạn có thể sử dụng document.getElementById() hoặc bất kỳ phương pháp nào khác từ "gia đình" này.

Answer 2

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

Answer 3

Có lẽ cách qua trình duyệt đơn giản nhất là để thiết lập tên sự kiện như một thuộc tính của nguyên tố này:

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

Answer 4

Bạn phải đính kèm sự kiện mới khi tạo phần tử DOM.

Ví dụ:

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