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>