javascriptでイベントハンドラを追加する場所はどこですか？

Question

私はランダムな5つのイメージを作成し、それをdivノードに割り当て、後でそのノードをクローンし、別のdivノードを作成するjavascriptコードを持っています。

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(); 

}; 

私は=ヌルonclickの取得、そして期待通りのコードが動作しないこのコードを実行すると、私はJavaScriptに新たなんだ、どこで私のイベントハンドラを置くことを知りません。 私がする必要があるのは、divの最後の子ノードをクリックするたびに、私はonclickイベントをトリガーします。

Answer 1

ノードをクローンすると、内在（インライン）リスナーを含むすべての属性とその値がコピーされます。 addEventListener（）を使用して追加されたイベントリスナーや要素プロパティに割り当てられたイベントリスナーはコピーされません。 （例えばnode.onclick = FN） [Ref]

いずれかがonclickインラインハンドル（attribute）を使用するか、onclick要素が追加されるたびに使用します。

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();

adeneoによって示唆されるように、Event Delegationが参考になります！ イベント委任により、特定のノードにイベントリスナーを追加することを避けることができます。代わりに、イベントリスナーが1つの親に追加されます。そのイベントリスナーは、バブリングされたイベントを分析して、子要素の一致を検出します。