类的 Javascript .addEventListener "mouseenter"

Question

第一次发帖，在这里潜伏很久了。我有一个 HTML 表格，其中包含 ID SalesList，并且我希望当鼠标悬停在其中时，其中的单元格会突出显示为绿色。以下代码有效:

var theParent = document.querySelector("#SalesList");
theParent.addEventListener("click", doSomething, false);

function doSomething(e) {
    if (e.target !== e.currentTarget) {
        e.target.style.backgroundColor = "green";
    }
    e.stopPropagation();
}

我在 https://www.kirupa.com/html5/handling_events_for_many_elements.htm 找到了此代码

我的问题是当我改变时

theParent.addEventListener("click", doSomething, false);

至

theParent.addEventListener("mouseenter", doSomething, false);

它没有做我想做的事。我还尝试过 onmouseenter 和许多其他事件类型，“单击”似乎是唯一有效的。

Answer 1

请不要为此使用 JavaScript。这可以而且应该与 css 一起使用。只需应用 :hover 伪选择器即可。

td:hover {
  color: green;
}

<table id="sales-list">
  <tr>
    <td>Pineapple</td>
    <td>$3.00 </td>
  </tr>
  <tr>
     <td>Bread</td>
     <td>$2.00</td>
  </tr>
</table>

让我们将其与在 JavaScript 中必须执行的操作进行比较。

var cells = document.querySelectorAll("td");

for (var i = 0; i < cells.length; i++) {
    cells[i].addEventListener("mouseover", function() {
        this.style.color = "green";
    });
    cells[i].addEventListener("mouseout", function() {
        this.style.color = "black";
    });
}

<table id="sales-list">
  <tr>
    <td>Pineapple</td>
    <td>Bread </td>
  </tr>
  <tr>
     <td>$3.00</td>
     <td>$2.00</td>
  </tr>
</table>

在 JavaScript 中，您必须查询 td 元素列表，循环遍历所有元素，并为每个元素添加两个事件监听器。这大约是 10 行我们不需要的额外代码。

TLDR:最好使用 CSS。