如何在JavaScript中替换对象的情况下侦听事件
我正在用JavaScript创建一个拼字游戏，我遇到了一个问题。我有一个函数，可以在tile-rack-div中创建拼字块。我还有一个事件侦听器，可以在单击tile-div时侦听。单击电路板上的某个部分，然后单击平铺分区时，它会将平铺放置在电路板上，然后将其从父分区（平铺机架）中移除。其工作原理是：我创建一个数组，其中包含那些平铺div，然后当我从数组中移除div时，我会用新数组覆盖父div（平铺机架）。所有这些都发生得很好，但现在的问题是，当旧tile覆盖父div中的新tile时，事件侦听器将不再工作 这是我的代码和我的整个代码的链接，解释了这一点：如何在JavaScript中替换对象的情况下侦听事件,javascript,html,css,Javascript,Html,Css,我正在用JavaScript创建一个拼字游戏，我遇到了一个问题。我有一个函数，可以在tile-rack-div中创建拼字块。我还有一个事件侦听器，可以在单击tile-div时侦听。单击电路板上的某个部分，然后单击平铺分区时，它会将平铺放置在电路板上，然后将其从父分区（平铺机架）中移除。其工作原理是：我创建一个数组，其中包含那些平铺div，然后当我从数组中移除div时，我会用新数组覆盖父div（平铺机架）。所有这些都发生得很好，但现在的问题是，当旧tile覆盖父div中的新tile时，事件侦听器将
let bag = ["A|1","A|1","A|1","A|1","A|1","A|1","A|1","A|1","A|1","B|3","B|3","C|3","C|3","D|2","D|2","D|2","D|2","E|1","E|1","E|1","E|1","E|1","E|1","E|1","E|1","E|1","E|1","E|1","E|1","F|4","F|4","G|2","G|2","G|2","H|4","H|4","I|1","I|1","I|1","I|1","I|1","I|1","I|1","I|1","I|1","J|8","K|5","L|1","L|1","L|1","L|1","M|3","M|3","N|1","N|1","N|1","N|1","N|1","N|1","O|1","O|1","O|1","O|1","O|1","O|1","O|1","O|1","P|3","P|3","Q|10","R|1","R|1","R|1","R|1","R|1","R|1","S|1","S|1","S|1","S|1","T|1","T|1","T|1","T|1","T|1","T|1","U|1","U|1","U|1","U|1","V|4","V|4","W|4","W|4","X|8","Y|4","Y|4","Z|10","|","|"];
// to fill the plate or stick with tiles from the bag array
let player1 = [];
let player2 = [];
let player1plate = document.getElementById("plate1");
let player2plate = document.getElementById("plate2");
// var tile = bag[Math.floor(Math.random() * bag.length)];
// FILL THE PLATE OR STICK WITH TILES
function fillStick(player, numberOfTilesNeeded, playerplate, id) {
let insert = "";
for (let i = 0; i < numberOfTilesNeeded; i++) {
randomIndex = Math.floor(Math.random() * bag.length);
player.push(bag[randomIndex]);
bag.splice(randomIndex, 1);
}
for (let j = 0; j < player.length; j++) {
insert += `
<div class="tile" id="${id}${j}">
<h2> ${player[j].split("|")[0]}</h2>
<p>${player[j].split("|")[1]}</p>
</div>`;
}
playerplate.innerHTML = insert;
// console.log(bag);
console.log(player1);
}
fillStick(player1, 7, player1plate, "tile");
fillStick(player2, 7, player2plate, "rile");
function removeTile(player, playerplate, id) {
let insert = "";
for (let j = 0; j < player.length; j++) {
insert += `
<div class="tile" id="${id}${j}">
<h2> ${player[j].split("|")[0]}</h2>
<p>${player[j].split("|")[1]}</p>
</div>`;
}
playerplate.insertAdjacentHTML("beforeend",insert);
console.log(playerplate);
}
// for the tiles on the rack/plate to click and be placed on the board
let tileClicked = 0;
let allTiles = document.querySelectorAll(".tile");
allTiles.forEach((e) => {
e.addEventListener("click", () => {
for (let i = 0; i < allTiles.length; i++) {
allTiles[i].setAttribute("class", "tile");
}
if (tileClicked == e.id) {
e.setAttribute("class", "tile");
tileClicked = 0;
} else {
e.setAttribute("class", "tile active");
tileClicked = e.id;
if (clicked != 0) {
document
.getElementById(clicked)
.setAttribute(
"style",
"background: #dfb15b; flex-direction: column;"
);
document.getElementById(clicked).setAttribute("class", "tilesections");
document.getElementById(clicked).innerHTML = e.innerHTML;
if (tileClicked.split("e")[0] == "til") {
player1.splice(tileClicked.split("e")[1], 1);
removeTile(player1, player1plate, "tile")
} else {
player2.splice(tileClicked.split("e")[1], 1);
removeTile(player2, player2plate, "rile")// where i stopped
console.log(player2);
}
clicked = 0;
tileClicked = 0;
e.setAttribute("class", "tile");
}
}
// console.log(e.id);
// console.log(player1);
});
});
我认为你应该以不同的方式来处理这个问题。与其在每个磁贴上添加一个均匀的侦听器，不如在磁贴容器上添加一个侦听器。当你单击内部磁贴时，事件将“冒泡”“向上。当它到达container div时，您可以捕获它并使用event参数的
event.target这回答了你的问题吗？关于提议的复制演示了如何在没有jQuery的情况下使用事件委派。我现在明白了。谢谢您很高兴我能提供帮助，干杯！；）
<div id="board">
<div id="1"> 1 </div>
<div id="2"> 2 </div>
<div id="3"> 3 </div>
</div>
#board > div
{
width: 50px;
height: 50px;
background-color: gray;
margin: 10px;
}
document.getElementById('board').addEventListener('click', (e) =>
{
let t = e.target
alert(`${t.id} clicked`)
})