javaScript动态绑定

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