将事件处理程序应用于新创建的对象答案

【问题标题】：applying an event handler to newly created objects将事件处理程序应用于新创建的对象
【发布时间】：2015-12-01 23:21:43
【问题描述】：

所以我的目标是拥有 5 个框，每次单击一个框时都会出现一个新框。我为此编写的代码是这样的：

window.onload = function(){
    var boxList = document.getElementsByClassName("box");
    for(i = 0; i< boxList.length;i++){
    boxList[i].onclick = clickHandler;
    } 
}

function clickHandler(eo){
    if(eo.target.style.backgroundColor != "black") {
        eo.target.style.backgroundColor = "black";
        var box = document.createElement("div");
        box.setAttribute("class","box");
        box.setAttribute("id",document.getElementsByClassName("box").length++);
        document.getElementById("Master").appendChild(box);
    }
    else eo.target.style.backgroundColor = "white";
}

所有 div 的类都是“盒子”，我只是为每个新盒子添加一个新 id。我的问题是事件处理程序似乎不适用于新创建的框。怎么可能解决？

非常感谢！

【问题讨论】：

添加 box.onclick = clickHandler;在 document.getElementById("Master").appendChild(box); 之后。这是因为您没有将 onclick 处理程序分配给新对象。
我认为您的事件处理程序正在工作，我使用了您的代码并将警报放入 clickHandler 并且那些弹出了.. 我认为您的问题是其他问题，可能是框重叠，请放您的 HTML 代码也是如此 ..

标签： javascript eventhandler

【解决方案1】：

box.onclick = clickHandler;

还有更优雅的方法，但既然你已经在做，那么现在做你正在做的事情并没有什么坏处。

在不同的世界，你可能会这样做：

var master = document.querySelector("#master");

master.addEventListener("click", clickHandler);

function clickHandler (e) {
  var box = e.target;
  var newBox;
  var totalBoxes = master.querySelectorAll(".box").length;
  if (!box.classList.contains("box")) {
    return; // not a box
  }

  if (isBlack(box)) {
    changeColour(box, "white");
  } else {
    newBox = makeNewBox(totalBoxes + 1);
    master.appendChild(newBox);
    changeColour(box, "black");
  }
}

如果所有框都是#master 的后代，我不必担心进一步的点击处理。这里的 makeNewBox 只是简单地将对象的创建与您实际想要对它执行的操作分开。

【讨论】：

【解决方案2】：

您需要在新添加的框中添加一个 onclick 事件。

box.onclick = clickHandler;

【讨论】：

【解决方案3】：

如果您在 window.onload 处理程序已经运行之后动态创建框，那么您将必须在这些动态创建的框上运行一些额外的代码，以便在创建后将点击处理程序分配给它们。

function clickHandler(eo){
    if(eo.target.style.backgroundColor != "black") {
        eo.target.style.backgroundColor = "black";
        var box = document.createElement("div");
        box.setAttribute("class","box");

        // add this line of code to assign the click handler
        box.onclick = clickHandler;

        box.setAttribute("id",document.getElementsByClassName("box").length++);
        document.getElementById("Master").appendChild(box);
    }
    else eo.target.style.backgroundColor = "white";
}

或者，您可以使用委托事件处理并处理来自非动态创建的公共父级的事件。

委托事件处理使用“事件冒泡”，其中事件在其父链中冒泡，因此您可以将点击处理程序附加到公共父级，然后在该点击处理程序中检查 e.target 以查看点击是否发生在您的框之一上元素，然后在一个地方处理它。在动态添加内容的情况下，这可以很好地工作。

代码中的委托事件处理如下所示：

window.onload = function(){
    // put click handler on common box parent and use event bubbling
    document.getElementById("Master").addEventListener("click", clickHandler);
}

function clickHandler(eo){
    // if this click occurred on one of my boxes
    if (hasClass(eo.target, "box"))
        if(eo.target.style.backgroundColor != "black") {
            eo.target.style.backgroundColor = "black";
            var box = document.createElement("div");
            box.setAttribute("class","box");
            box.setAttribute("id",document.getElementsByClassName("box").length++);
            document.getElementById("Master").appendChild(box);
        }
        else eo.target.style.backgroundColor = "white";
    }
}

// utility function for checking a class name
// could also use .classList with a polyfill for older browsers
function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) !== -1) ;
}

【讨论】：