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>

当使用td鼠标悬停class="cell"时，我必须在我的鼠标td之间获取文字并对此进行操作。这应该使用纯JavaScript，没有框架。我试过了：

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

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

它不起作用，或者我犯了错误？

Answer 1

document.querySelector('.cell');

仅选择具有class='cell'的第一个元素。

要向所有此类元素添加事件侦听器，请使用querySelectorAll()

将返回具有class='cell'的NodeList（一种非活动DOM元素的数组）。您需要迭代它或使用索引访问一个元素。

用于解释像

这样的东西

var cell =document.querySelectorAll('.cell');
for(var i=0;i<cell.length;i++){
  cell[i].addEventListener('mouseover',callback,false);
}

检查此fiddle

Answer 2

我宁愿使用事件委托。

document.getElementById('your-table').addEventListener('mouseover', function (e) {
    var t = e.target;

    if (t.classList.contains('cell')) {
        console.log(t.textContent);
    }
});

然而＆＃34;它没有工作，或者我犯了错误？＆＃34;

querySelector返回单个元素。
cell.addEventListener('mouseover',callback()，此处callback()立即调用回调函数，而这不是您想要的。您想要传递函数参考，请删除()。

请注意，即使您使用返回节点列表的querySelectorAll，它也不会实现Composite pattern，因此您无法将列表视为单个元素，就像使用jQuery一样对象

Answer 3

现在大多数现代js环境都支持for...of次迭代，所以你现在可以这样做：

for (var cell of document.querySelectorAll('.cell')) {
  cell.addEventListener('mouseover',callback,false);
}

这甚至可以在一行中起作用：

 document.querySelectorAll('.cell').map(cell=>cell.addEventListener('mouseover', callback, false));

基于类向DOM元素添加事件侦听器

3 个答案: