addEventListener（）仅适用于最后一个实例

Question

我创建了一个简单的颜色选择器，其中脚本创建了两个选择器实例 - 一个用于更改文本颜色，第二个用于背景颜色（取决于数据属性）已经分配给它）。

循环元素事件侦听器仅附加到创建的颜色选择器的最后一个实例。在下面的例子中，背景会改变，但文本颜色不会像先前定义的事件处理程序丢失一样。我发现this answer，但无法让我的工作。

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 < allColors.length; i++) { 
 
      allColors[i].addEventListener('click', function() { 
 
       var colorEl = document.querySelectorAll('[data-color="' + attr + '"]'); 
 
       var newColor = this.getAttribute('data-hex'); 
 
       for (var i = 0; i < colorEl.length; i++) { 
 
        switch(property) { 
 
         case 'color'  : colorEl[i].style.color = newColor; break; 
 
         case 'background' : colorEl[i].style.backgroundColor = newColor; break; 
 
        } 
 
       } 
 
      }, false); 
 
     } 
 
    } 
 
    new colorPallete('txtColor', 'text', 'color', 'Change text color'); 
 
    new colorPallete('bgColor', 'background', 'background', 'Change background color');

#colorPicker .current, 
 
#colorPicker .colors .color { 
 
    display: inline-block; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 6px; 
 
    cursor: pointer; 
 
}

<div id="colorPicker"></div> 
 
<br /><br /><br /> 
 
<div class="bg" data-color="background">Background color</div> 
 
<div class="bg" data-color="text">Text color</div>

Answer 1

当你分配到的colorsParent.innerHTML，你删除所有的都在里面的元素，通过解析您指定的HTML创建新的元素。所以你分配给这些元素的所有事件监听器都会丢失。

您可以使用.insertAdjacentHTML()向一个元素添加新的HTML而不删除旧的元素。

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.insertAdjacentHTML('beforeend', 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 < allColors.length; i++) { 
 
    allColors[i].addEventListener('click', function() { 
 
     var colorEl = document.querySelectorAll('[data-color="' + attr + '"]'); 
 
     var newColor = this.getAttribute('data-hex'); 
 
     for (var i = 0; i < colorEl.length; i++) { 
 
     switch (property) { 
 
      case 'color': 
 
      colorEl[i].style.color = newColor; 
 
      break; 
 
      case 'background': 
 
      colorEl[i].style.backgroundColor = newColor; 
 
      break; 
 
     } 
 
     } 
 
    }, false); 
 
    } 
 
} 
 
new colorPallete('txtColor', 'text', 'color', 'Change text color'); 
 
new colorPallete('bgColor', 'background', 'background', 'Change background color');

#colorPicker .current, 
 
#colorPicker .colors .color { 
 
    display: inline-block; 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-right: 6px; 
 
    cursor: pointer; 
 
}

<div id="colorPicker"></div> 
 
<br /><br /><br /> 
 
<div class="bg" data-color="background">Background color</div> 
 
<div class="bg" data-color="text">Text color</div>