您的位置:首页 - 教程 - JavaScript - 正文
解决getElementsByClassName后addEventListener不生效
使用getElementsByClassName获取元素后直接使用addEventListener,可能不起作用,原因是getElementsByClassName取得的可能是元素数组。解决的办法是使用循环语句。

document.getElementsByClassName(...)捕捉到的是该类名元素的数组
正确的访问方式应该是:
document.getElementsByClassName(...)[0].addEventListener...
使用遍历为每个class添加监听:
var classObj = document.getElementsByClassName(...);
for(i=0;iclassObj[i].addEventListener...
}

下面举一个例子。

http://hovertree.com/texiao/mobile/8/

<ul class="hovertreelist-ul">
<li id="li" class="hovertreelist-li">
<div class="con">
何问起,你的快递到了,请到楼下签收<a href="http://hovertree.com/">详情</a>
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
哇,你在干嘛,快点来啊就等你了
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
何问起发给你一个节日红包,<a href="http://hovertree.com/wx/hwq/6/">点这里查收</a>
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
<a href="http://hovertree.com/hovertreescj/">何问起收藏夹</a>欢迎您的使用。
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
<a href="http://hovertree.com/h/bjaf/jtkqnsc1.htm">CSS3</a>绘制各种各样的图形图标
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
何问起发给你一个节日红包,请注意查收。
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
<a href="http://hovertree.com/menu/bootstrap/">Bootstrap</a>十分实用,大大提高效率。
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
何问起你有一个到付快递,请到门口查收。
</div>
<div class="hovertreebtn">删除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
柯乐义给你寄来了一张贺卡,请到门口查收。
</div>
<div class="hovertreebtn">删除</div>
</li>
</ul>
<script>
var hovertreeItems = document.getElementsByClassName("hovertreebtn");
var h_count = hovertreeItems.length;
for(var i=0;i<h_count;i++)
{
hovertreeItems[i].addEventListener('click', function (event) {
var hovertreeitem = event.target.parentNode;
hovertreeitem.style.display = 'none';
})
}
</script>

评论: