Wo kann ein Event-Handler in Javascript hinzugefügt werden?

Question

Ich habe einen JavaScript-Code, der eine zufällige 5 Bilder erstellt, weist es zu einem Div-Knoten und klont später diesen Knoten und füllt einen anderen Div-Knoten.

var numberOffaces = 5; 
var theLeftSide = document.getElementById("leftSide"); 
var theRightSide = document.getElementById("rightSide"); 
var theBody = document.getElementsByTagName("body")[0]; 


function generateFaces() { 
    for (var i = 0; i < numberOffaces; i++) { 
     var imgNode = document.createElement("IMG"); 
     imgNode.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
     imgNode.style.top = Math.floor(Math.random() * 400) + "px"; 
     imgNode.style.left = Math.floor(Math.random() * 400) + "px"; 
     theLeftSide.appendChild(imgNode); 
    } 
    var leftSideImages = theLeftSide.cloneNode(true); 
    leftSideImages.removeChild(leftSideImages.lastChild); 
    theRightSide.appendChild(leftSideImages); 
} 

//add event handler 
theLeftSide.lastChild.onclick = 
    function nextLevel(event) { 

     event.stopPropagation(); 

     numberOfFaces += 5; 

     generateFaces(); 

}; 

Wenn ich diesen Code ausführen bekomme ich Onclick = null, und der Code nicht wie erwartet, ich bin neu zu Javascript und weiß nicht, wo meine Event-Handler zu setzen. Was ich tun muss, ist, wenn ich auf den letzten Kind-Knoten der div klicke ich das Onclick-Ereignis auslösen.

Answer 1

Das Klonen eines Knotens kopiert alle seine Attribute und ihre Werte, einschließlich der systeminternen (in-line) Listener. Event-Listener, die mit addEventListener() hinzugefügt wurden, oder solche, die Elementeigenschaften zugewiesen sind, werden nicht kopiert. (z.B. node.onclick = fn) [Ref]

Entweder verwenden onclick inline Griff (attribute) oder verwenden onclick jedes Zeitelement angehängt wird.

var numberOffaces = 5; 
 
var theLeftSide = document.getElementById("leftSide"); 
 
var theRightSide = document.getElementById("rightSide"); 
 
var theBody = document.getElementsByTagName("body")[0]; 
 

 

 
function generateFaces() { 
 
    for (var i = 0; i < numberOffaces; i++) { 
 
    var imgNode = document.createElement("IMG"); 
 
    imgNode.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
 
    imgNode.style.top = Math.floor(Math.random() * 400) + "px"; 
 
    imgNode.style.left = Math.floor(Math.random() * 400) + "px"; 
 
    theLeftSide.appendChild(imgNode); 
 
    } 
 
    var leftSideImages = theLeftSide.cloneNode(true); 
 
    leftSideImages.removeChild(leftSideImages.lastChild); 
 
    theRightSide.appendChild(leftSideImages); 
 
    doAddEvent(); 
 
} 
 

 
//add event handler 
 
function doAddEvent() { 
 
    theLeftSide.lastChild.onclick = 
 
    function nextLevel(event) { 
 
     event.stopPropagation(); 
 
     numberOfFaces += 5; 
 
     generateFaces(); 
 
    }; 
 
} 
 
doAddEvent();

Wie adeneo vorgeschlagen wird Event Delegation hilfreich sein! Ereignisdelegierung ermöglicht es Ihnen, das Hinzufügen von Ereignis-Listenern zu bestimmten Knoten zu vermeiden. Stattdessen wird der Ereignis-Listener einem übergeordneten Element hinzugefügt. Dieser Ereignis-Listener analysiert gesprudelte Ereignisse, um eine Übereinstimmung für untergeordnete Elemente zu finden.