Javascript .addEventListener" mouseenter"为一个班级 [英] Javascript .addEventListener "mouseenter" for a class

问题描述

第一次海报，很久以前在这里潜伏。
我在HTML中有一个ID为SalesList的表格，并且我希望鼠标在它上面时，其中的单元格会突出显示为绿色。以下代码有效：

  var theParent = document.querySelector（＃SalesList）; 
 theParent.addEventListener（click，doSomething，false）; 
 
函数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和许多其他的事件类型，并且click似乎是唯一可用的。

解决方案

请不要使用JavaScript。这可以而且应该与CSS一起使用。只需应用：hover pseudoselector即可。

td： hover {color：green;}

< table id = 销售清单> < TR> < TD>菠萝< / TD> < td> $ 3.00< / td> < / TR> < TR> < TD>面包和LT; / TD> < TD> $ 2.00 LT; / 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>菠萝< / TD> < td>面包< / td> < / TR> < TR> < TD> $ 3.00 LT; / TD> < TD> $ 2.00 LT; / TD> < / tr>< / table>  
 

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

TLDR：最好使用CSS。

first time poster, long time lurker here. I have a table in HTML that has the ID SalesList and I want the cells within it to be highlighted green when the mouse is over it. The following code works:

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();
}

I found this code at https://www.kirupa.com/html5/handling_events_for_many_elements.htm

My problem is that when I change

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

to

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

it does not do what I want it to. I have also tried onmouseenter and many other event types and "click" seems to be the only one working.

解决方案

Please do not use JavaScript for that. This can and should be used with css instead. Simply apply the :hover pseudoselector.

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>

Let's compare this to what we'd have to do in 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>

In JavaScript, you'd have to query a list of td elements, loop through all of them and for each of them add two event listeners. This is about 10 lines of extra code we don't need.

TLDR: Best to use CSS for this.

这篇关于Javascript .addEventListener" mouseenter"为一个班级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！