className相同的多个元素分别设置监听事件(原生JS实现)

JS使用for循环动态生成多个div,HTML大概是这样:

<div class='title'> y </div>
<div class='title'> i </div>
<div class='title'> x </div>
<div class='title'> z </div>
<div class='title'> m </div>

希望每个div能对应不同的监听事件,在网上寻寻觅觅终于找到了解决办法:

var tt = getElementsByClassName("title");
for (i = 0; i < tt.length; i++) {
    var ul = document.querySelectorAll('.title')[i];
    handler = function(event){
        var e = event || window.event;
        var target = e.target || e.srcElement;
        console.log(target.innerHTML);
    };
    if (window.addEventListener){
        ul.addEventListener("click",handler,false);
    }
    else if (window.attachEvent){
        ul.attachEvent("onclick",handler);
    }
}

实际效果如图:
在这里插入图片描述

本文解决方法摘录自 https://segmentfault.com/q/1010000002804347 Lemures 的回答

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!