javascript - 基于类为DOM元素添加事件监听器

Question

我有一个表，其中每个 tr 和 td 只有类，我在选择具有类的 td 元素时遇到问题我需要
HTML:

<table>
 <tr class="data">
  <td class="cell">1</td>
  <td class="cell2"></td>
 </tr>
 <tr class="data">
  <td class="cell">2</td>
  <td class="cell2"></td>
 </tr>
</table>

当使用 class="cell" 将鼠标悬停在 td 上时，我必须在我的鼠标所在的 td 之间获取文本，并用它做一些事情。这应该使用纯 JavaScript 完成，无需框架。我试过:

var cell = document.querySelector('.cell');

function callback(){ //do something }
cell.addEventListener('mouseover',callback(),false);

它不起作用，还是我做错了？

Answer 1

下面只会选择第一个带有class='cell'的元素。

document.querySelector('.cell');

要为所有此类元素添加事件监听器，请使用 querySelectorAll() ,这将返回 NodeList (一种非事件 DOM 元素数组)具有 class='cell'。您需要迭代它或使用它的索引访问特定元素。

例如:

var cells = document.querySelectorAll('.cell');
cells.forEach(cell => cell.addEventListener('mouseover', callback, false));

检查这个fiddle