将事件侦听器添加到多个生成的元素

Question

我正在尝试使用纯 JS 并基于 CSS 和 HTML GUI 为我的学校制作 Tic-Tac-Toe。我知道这可能不是最好的方法，但我认为它可能有效。不幸的是，它根本不起作用。我尝试在 Board.generate() 中通过 JS 生成整个板，因为我想让我的板可调整大小，然后向每个生成的单元格添加事件侦听器，但这不是& #39；不工作。 Onclick 仅在最后一个元素上调用，而不在前面的元素上调用。我认为我可以通过创建一个函数来绕过这个问题，但我想了解为什么我的代码不起作用。这是我的代码：class Board {  constructor(size) {    this.size = size;     this.cells = [];    for (let x = 0; x < size; x++) {      this.cells[x] = [];      for (let y = 0; y < size; y++) {        this.cells[x][y] = new Cell(x, y, null);      }    }  }   generate() {    document.getElementById('game').innerHTML = '<div id="board"></div>';     let boardEl = document.getElementById('board');     for (let y = 0; y < this.size; y++) {      boardEl.innerHTML += '<div id="r' + y + '" class="board-row"></div>';      let rowEl = document.getElementById('r' + y);       for (let x = 0; x < this.size; x++)        this.cells[x][y].addElement(rowEl);    }  }} class Cell {  constructor(x, y, mark) {    this.x = x;    this.y = y;    this.mark = mark;    this.id = 'c' + x + y;    this.element = null;  }   addElement(rowEl) {    rowEl.innerHTML += '<div id="' + this.id + '" class="board-cell"> CELL </div>';    this.element = document.getElementById(this.id);    this.element.addEventListener('click', () => this.clicked(), false);  }   clicked() {    console.log(this.x, this.y, ' CLICKED!');  }} window.onload = function () {  var game = new Board(3);  game.generate();};<style>  .board-cell {    width: 10%;    height: 10%;    background: white;    color:black;  }</style><div id="container" class="fullscreen">  <div id="game" class="fullscreen">    <!-- Generated board -->  </div></div>我知道我的代码现在一团糟，但我只是感到沮丧，而且这只是一个草图，我会继续努力。 另外，如果我犯了一些错误，我很抱歉我的英语。

Answer 1

任何时候设置 innerHTML 属性都会覆盖之前设置的任何 HTML。这包括串联赋值，因为

element.innerHTML += '<b>Hello</b>';

和写作一样

element.innerHTML = element.innerHTML + '<b>Hello</b>';

这意味着所有未通过 HTML 属性附加的处理程序都将被“分离”，因为它们附加的元素不再存在，并且一组新的元素已取代它们。要保留所有以前的事件处理程序，您必须附加元素而不覆盖任何以前的 HTML。最好的方法是使用 DOM 创建函数，例如 createElement 和appendChild：

let divEl  = document.createElement("div");

divEl.innerHTML = "CELL";   

divEl.className = 'board-cell'

divEl.id = this.id;

rowEl.appendChild(divEl);

对于行 div 元素也是如此：

let divRowEl  = document.createElement("div");

divRowEl.className = 'board-row'

divRowEl.id = 'r' + y;

boardEl.appendChild(divRowEl);

class Board {

  constructor(size) {

    this.size = size;

 

    this.cells = [];

    for (let x = 0; x < size; x++) {

      this.cells[x] = [];

      for (let y = 0; y < size; y++) {

        this.cells[x][y] = new Cell(x, y, null);

      }

    }

  }

 

  generate() {

    

    document.getElementById('game').innerHTML = '<div id="board"></div>';

 

    let boardEl = document.getElementById('board');

 

    for (let y = 0; y < this.size; y++) {

      let divRowEl  = document.createElement("div");

      divRowEl.className = 'board-row'

      divRowEl.id = 'r' + y;

      boardEl.appendChild(divRowEl);

      let rowEl = document.getElementById('r' + y);

      

      for (let x = 0; x < this.size; x++)

        this.cells[x][y].addElement(rowEl);

    }

  }

}

 

class Cell {

  constructor(x, y, mark) {

    this.x = x;

    this.y = y;

    this.mark = mark;

    this.id = 'c' + x + y;

    this.element = null;

  }

 

  addElement(rowEl) {

    let divEl  = document.createElement("div");

    divEl.innerHTML = "CELL" + this.id;   

    divEl.className = 'board-cell'

    divEl.id = this.id;

    divEl.addEventListener('click', () => this.clicked(), false);

    rowEl.appendChild(divEl);

  }

 

  clicked() {

    console.log(this.x, this.y, ' CLICKED!');

  }

}

 

window.onload = function () {

  var game = new Board(3);

  game.generate();

};

<style>

  .board-cell {

    width: 10%;

    height: 10%;

    background: white;

    color:black;

  }

</style>

<div id="container" class="fullscreen">

  <div id="game" class="fullscreen">

    <!-- Generated board -->

  </div>

</div>