HTML：将事件侦听器添加到元素矩阵的最佳方法

Question

假设我有一个动态矩阵（使用tr和td构建）

----------------------
1  | 2  | 3  | 4  | 5
----------------------
6  | 7  | 8  | 9  | 10
----------------------
11 | 12 | 13 | 14 | 15
----------------------

我要alert单击的号码。

我不想为每个td添加一个事件侦听器，或在table上设置一个事件侦听器，并读取innerText的dataset或target。基本上，我不想为此依赖DOM。

在有限制的情况下，最有效的方法是什么？下面是我尝试过的内容。

function createTable() {
  var table = document.createElement('table'),
    cells = '',
    rows = '',
    i,
    j

  for (i = 0; i < 50; i++) {
    for (j = 0; j < 50; j++) {
      cells += '<td>' + ((50 * i) + (j + 1)) + '</td>'
    }

    rows += '<tr>' + cells + '</tr>'
    cells = ''
  }

  table.innerHTML = rows
  table.addEventListener('click', function (event) {
    var cellIndex = event.path[0].cellIndex,
      rowIndex = event.path[1].rowIndex

    alert(50 * rowIndex + (cellIndex + 1))
  })

  document.body.insertAdjacentElement('beforeend', table)
}

document.addEventListener('DOMContentLoaded', createTable)

Answer 1

您可以将ID添加到表中，并将事件侦听器添加到表中

function createTable() {
  var table = document.createElement('table'),

    cells = '',
    rows = '',
    i,
    j;
  table.id = 'test';

  for (i = 0; i < 50; i++) {
    for (j = 0; j < 50; j++) {
      cells += '<td>' + ((50 * i) + (j + 1)) + '</td>'
    }

    rows += '<tr>' + cells + '</tr>'
    cells = ''
  }

  table.innerHTML = rows

  document.body.insertAdjacentElement('beforeend', table);
  document.getElementById('test').addEventListener('click', function(e) {
    console.log(e.target.innerHTML)
  })
}



document.addEventListener('DOMContentLoaded', createTable);

td {
  cursor: pointer;
}