我正在尝试使用for循环向多个对象添加事件侦听器,但最终会将所有侦听器定位到同一个对象 - >最后一个.
如果我通过为每个实例定义boxa和boxb来手动添加侦听器,它就可以工作.我想这就是addEvent for-loop,它不像我希望的那样工作.也许我完全使用了错误的方法.
使用4个class ="container"的示例容器4上的触发器按照预期的方式工作.触发容器1,2,3触发容器4上的事件,但仅在触发器已被激活时触发.
// Function to run on click:
function makeItHappen(elem, elem2) {
var el = document.getElementById(elem);
el.style.backgroundColor = "red";
var el2 = document.getElementById(elem2);
el2.style.backgroundColor = "blue";
}
// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");
for (var i = 0; i < elem.length; i += 2) {
var k = i + 1;
var boxa = elem[i].parentNode.id;
var boxb = elem[k].parentNode.id;
elem[i].addEventListener("click", function() {
makeItHappen(boxa, boxb);
}, false);
elem[k].addEventListener("click", function() {
makeItHappen(boxb, …我想使用事件监听器来防止事件在具有onclick函数的div内的div上冒泡.这工作,传递参数我的意图:
<div onclick="doMouseClick(0, 'Dog', 'Cat');" id="button_id_0"></div>
<div onclick="doMouseClick(1, 'Dog', 'Cat');" id="button_id_1"></div>
<div onclick="doMouseClick(2, 'Dog', 'Cat');" id="button_id_2"></div>
<script>
function doMouseClick(peram1, peram2, peram3){
alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);
}
</script>
但是,我尝试在循环中创建多个事件侦听器:
<div id="button_id_0"></div>
<div id="button_id_1"></div>
<div id="button_id_2"></div>
<script>
function doMouseClick(peram1, peram2, peram3){
alert("doMouseClick() called AND peram1 = "+peram1+" AND peram2 = "+peram2+" AND peram3 = "+peram3);
}
var names = ['button_id_0', 'button_id_1', 'button_id_2'];
for (var i=0; i<names.length; i++){
document.getElementById(names[i]).addEventListener("click", function(){
doMouseClick(i, "Dog", "Cat"); …我正在创建一个简单的颜色选择器,其中脚本创建两个选择器实例 - 一个用于更改文本颜色,另一个用于背景颜色(取决于元素分配给它的数据属性).
循环元素时,事件侦听器仅附加到创建的颜色选择器的最后一个实例.在下面的示例中,背景将更改,但文本颜色将不会像先前定义的事件处理程序一样丢失.我找到了这个答案,但不能让我的工作.
var colorPallete = function(id, attr, property, label) {
var colorsParent = document.getElementById('colorPicker');
var colorPallete = '<div id="' + id + '" class="pallete"><span>' + label + '</span><div class="colors"></div></div>';
colorsParent.innerHTML += colorPallete;
var colors = [
'blue',
'red',
'green'
];
for (var i = 0; i < colors.length; i++) {
document.getElementById(id).getElementsByClassName('colors')[0].innerHTML += '<div class="color" data-hex="' + colors[i] + '" style="background-color:' + colors[i] + '"></div>';
}
var allColors = document.getElementById(id).getElementsByClassName('color');
for (var i = 0; i < …