javascript - 类的Javascript .addEventListener“mouseenter”

第一次发布，很久就潜伏在这里。
我有一个带有ID SalesList的HTML表，我希望当鼠标悬停在其中时，其中的单元格以绿色突出显示。以下代码有效：

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和许多其他事件类型，“单击”似乎是唯一一种工作方式。

最佳答案

请不要为此使用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。

关于javascript - 类的Javascript .addEventListener“mouseenter”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37911631/