Как подключить слушателя к клонированному элементу?

Question

В настоящее время я изучаю DOM и имею эту проблему, с которой я борюсь, когда два или более клонированных элемента получают один и тот же прослушиватель событий.

 case 116: 
      var myList = document.querySelectorAll(".selected"); 
      for(var i=0; i<myList.length;i++) 
      { 
       var node=myList[i].cloneNode(true); 
       node.style.top=Math.random()*window.innerHeight-(node.style.height/2)+"px"; 
       node.style.left=Math.random()*window.innerWidth-(node.style.width/2)+"px"; 
       node.addEventListener("click",function(e){ 
        node.classList.toggle("selected"); 
        console.log(e); 
       }); 
       myList[i].parentNode.appendChild(node); 
      } 
      break; 

коробок 1 является оригинальной коробкой, и он имеет свой собственный EventListener.

box 2 является клоном оригинала и выбирает и отменяет выбор, как следует.

коробки 3-4 клоны 1-2, но мне кажется, что коробка 3 и 4 получить тот же слушатель, потому что, когда я нажимаю на поле 4 переключает выбранный на поле 3 и ничего не происходит с коробкой 4.

Как это решить?

Любая помощь будет наиболее желанной.

Answer 1

Я думаю, что это проблема. Обработчик событий ссылается на node, но в конце цикла node укажет на созданную последнюю квадрат. Вы можете сохранить значение node для каждого обработчика событий с помощью закрытия:

(function(node) { 

    // 'node' defined here is in it's own scope, so won't be affected by the changes 
    // made to the 'node' variable defined in the outer scope of the loop. 
    node.addEventListener("click",function(e){ 
     node.classList.toggle("selected"); 
     console.log(e); 
    }); 

})(node); 

, но, вероятно, лучшим решением является использование this в обработчике события:

node.addEventListener("click",function(e){ 

    // within an event handler, 'this' references the event's target element 
    this.classList.toggle("selected"); 
    console.log(e); 
});