原生html绑定onclick事件,JavaScript如何给HTML元素动态绑定onclick和hover事件？

JavaScript如何给HTML元素动态绑定onclick和hover事件？

JavaScript使用getElementsByClassName获取所有指定类名的HTML元素，然后使用for循环遍历逐个添加事件，这里要注意每个元素的事件是否存在共享数据的情况，普通添加事件的情形所有元素都会共享一个数据，若需要各自使用不同的数据，这时则需要使用闭包传值，达到每个元素都使用不同数据的目的。

1、动态绑定onclick事件：

var items = document.getElementsByClassName("item");

// 动态绑定onclick事件

// 使用for循环遍历，注意要使用立即执行函数和闭包才能生效

for(var i = 0;i < items.length;i++){

(function(j){

items[j].onclick = function(){

console.log("click: " + j);

}

})(i);

}

2、动态添加hover事件：

// 动态绑定hover事件

for(var i = 0;i < items.length;i++){

(function(j){

items[j].onmouseover = function(){

this.style.color = "#ffe573";

};

items[j].onmouseout = function(){

this.style.color = "#fff";

};

})(i);

}

效果如下：