在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將是有幫助的！ 事件委托使您可以避免將事件偵聽器添加到特定節點； 而是將事件偵聽器添加到一個父對象。 該事件偵聽器分析冒泡事件以找到子元素的匹配項。