我有3个div,第一个是id,第二个是同一个类。我已经为这3个div编写了一个带有javascript的EventListeners。我的第一个div的eventlistener与ID相关,但与getElementsByClassName()相关的第二个函数不起作用。这是我的代码
document.addEventListener("DOMContentLoaded", function() {
var firstElement = document.getElementById('firstOne');
firstOne.addEventListener('mouseout', function() {
this.style.backgroundColor = 'red';
this.style.border = '5px outset #00FF1E';
});
var secondElements = document.getElementsByClassName('secondOne');
secondElements.addEventListener('click', function() {
for (var i = 0; i < secondElements.length; i++) {
secondElements[i].style.backgroundColor = 'red';
}
});
});
#firstOne {
height: 240px;
width: 240px;
border: 5px solid blue;
background-color: orange;
display: inline-block;
}
.secondOne {
height: 240px;
width: 240px;
border: 5px solid green;
background-color: skyblue;
display: inline-block;
}
<div id="firstOne"></div>
<div class="secondOne"></div>
<div class="secondOne"></div>
document.getElementsByClassName
返回一个NodeList
。由于您正在执行secondElements.addEventListener
,它将抛出一个错误因为无法将事件附加到NodeList
。您总是将事件附加到Node
。
要解决此问题,请使用for循环(如果您对此感到满意,可以使用.apply-forEach
组合)在NodeList
的元素上循环,并单独附加事件侦听器。
document.getElementById
总是返回Node
(因为DOM中只能有一个元素具有特定的id
),因此firstOne.addEventListener
起作用。
代码示例:
var secondElements = document.getElementsByClassName('secondOne');
for(var i = 0, len = secondElements.length, elm; i < len; i++){
elm = secondElements[i];
elm.addEventListener('click', your_handler_function_here);
}
getElementsByClassName()返回具有所有给定类名的所有子元素的类似数组的对象。
使用for()
循环,并添加click
事件;
var secondElements = document.getElementsByClassName('secondOne');
for (var i=0;i<secondElements.length; i++) {
secondElements[i].addEventListener('click',function(){
for(var i = 0; i < secondElements.length ; i++){
secondElements[i].style.backgroundColor = 'red';
}
});
}
演示http://jsfiddle.net/yqec6aqs/