將事件處理程序應用於新創建的對象

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;