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();