純粋なjavascriptの動的に作成された要素に "onclick"ハンドラを追加します。

Question

私は、ページ上の要素 "a"と "button"を動的に作成して削除しています。ハンドラを作成するときにハンドラ "onclick"を追加します。これまでに私が見たすべての例はjqueryにありました。純粋なJavaScriptでどうすればいいですか？

Answer 1

addEventListenerを使用して、ダイナミックボタンにクリックリスナーを追加できます。

var btn = document.createElement("button"); 
btn.addEventListener('click', function(){ 
    alert('button clicked!'); 
}, false); 
document.body.appendChild(btn); 

Answer 2

この例では、テキストを含むボタンを作成し、idがtestの要素に追加します。

var btn = document.createElement('button'); 
btn.appendChild(document.createTextNode('test')); 

btn.addEventListener('click', function() { 
    alert('it works'); 
}, false); 

document.getElementById('test').appendChild(btn); 

これがうまくいけばうまくいきます。

Answer 3

から：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenerこのようにあなたが行うことができます

HTMLコンテンツ

<table id="outside"> 
    <tr><td id="t1">one</td></tr> 
    <tr><td id="t2">two</td></tr> 
</table> 

JavaScriptコンテンツ

// Function to change the content of t2 
function modifyText() { 
    var t2 = document.getElementById("t2"); 
    if (t2.firstChild.nodeValue == "three") { 
    t2.firstChild.nodeValue = "two"; 
    } else { 
    t2.firstChild.nodeValue = "three"; 
    } 
} 

// add event listener to table 
var el = document.getElementById("outside"); 
el.addEventListener("click", modifyText, false); 

Answer 4

：

for(var i=0;i<5;i++){ 
    var a = document.createElement("a"); 
    a.innerHTML="a"+i; 
    document.body.appendChild(a); 
    var button = document.createElement("button"); 
    button.innerHTML="button"+i; 
    button.onclick = function(){ 
    console.log("event on button"); 
    } 
    document.body.appendChild(button); 
}