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

Question

因此，我的目标是拥有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到每个新的盒子。我的问题是，事件处理程序似乎不适用于新创建的框。这怎么能解决？

非常感谢提前！

Answer 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这里简单地将对象的创建与您实际想要使用的对象创建分开。

Answer 2

如果您在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) ; 
} 

Answer 3

您将需要一个onclick事件添加到您的新添加的盒子。

box.onclick = clickHandler;