在JavaScript中的哪里添加事件处理程序？

Question

我有一个JavaScript代码，可以创建5张随机图像，将其分配给div节点，然后克隆该节点并填充另一个div节点。

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 = null，并且该代码无法按预期工作，这是javascript新手，也不知道将事件处理程序放在哪里。 我需要做的是，每当我单击div的最后一个子节点时，我都会触发onclick事件。

Answer 1

克隆节点会复制其所有属性及其值，包括固有（串联）侦听器。 它不会复制使用addEventListener（）添加的事件侦听器或分配给元素属性的事件侦听器。 （例如，node.onclick = fn） [ 参考 ]

每次添加元素时都可以使用onclick内联handle（ 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将是有帮助的！ 事件委托使您可以避免将事件侦听器添加到特定节点； 而是将事件侦听器添加到一个父对象。 该事件侦听器分析冒泡事件以找到子元素的匹配项。