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

当您分配给 .innerHTML 或 colorsParent 时，您将删除其中的所有元素，并通过解析您分配的 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>