1、使用原生JS動態為動態建立的物件繫結事件

1-1、建立一個function，用來相容IE8以下瀏覽器新增事件

function addEvent(el, type, fun) { if (el.addEventListener) { el.addEventListener(type, fun, false); } else if (el.attachEvent()) { el.attachEvent('on' + type, fun, false); } else { return false; } }

1-2、使用JS建立物件，呼叫上面的方法

function append() { var add = document.querySelector("#add"); add.addEventListener('click', function () { var body = document.querySelector("body"); var btn = document.createElement('button'); btn.type = 'button'; btn.innerHTML = "確定"; btn.setAttribute('class', 'btnClick'); body.appendChild(btn); addEvent(btn, 'click', function () { console.log(this.className); }); });
} append();

2、使用原生JS動態為動態建立的物件繫結事件

     首先要明白瀏覽器在載入頁面的時候是按順序來載入的，這樣以來就很清楚了，js動態新增dom以後，這些dom並沒有繫結事件，這個時候最簡單的一個辦法就是：將繫結事件的方法封裝到一個函式A中，在動態新增完dom以後立即執行一次函式A即可。

       需要注意的是，在你可能同時需要新增許多的dom，不要新增一個就執行一次函式A，這樣會增加瀏覽器的負載，你需要在所有dom新增完以後在執行函式A，例如你用一個for迴圈遍歷dom組合並拼接成一個字串，然後新增到某個父級dom裡面，這個時候你需要在迴圈外新增一次就可以了。

function getClass(classname) { return document.getElementsByClassName(classname); } getClass('btn')[0].onclick = function () { addDom(); } // 將點選事件封裝為函式 function funA() { for (var i = 0; i < getClass('innerDiv').length; i++) { getClass('innerDiv')[i].onclick = function () { alert(this.innerText); } } } // 將新增dom封裝為函式 function addDom() { var oldHtml = ''; for (var j = 0; j < 6; j++) { oldHtml += '<div class="innerDiv">' + j + '</div>' } getClass('outerDiv')[0].innerHTML = oldHtml; funA(); } // 如果將函式A放在這裡就不會起作用的 // funA();