Javascript .addEventListener "mouseenter"クラス用

Question

初めてのポスター、長時間lurkerはこちら。 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(); 
} 

私は私の問題は、私は

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

に

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

を変更したときに、それは何私をしないということであるhttps://www.kirupa.com/html5/handling_events_for_many_elements.htm

でこのコードを見つけましたそれが欲しい。 私は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で行う必要があるだろう何にこれを比較してみましょう。 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>

、あなたはそれらのすべてを、それらのそれぞれは、2人のイベントリスナーを追加するためにtd要素、ループのリストを照会する必要があると思います。これは不要な約10行の余分なコードです。

TLDR：これにはCSSを使用するのがベストです。

Answer 2

onmouseoverイベントは、マウスポインタが要素またはその子のいずれかに移動されたときに発生します。

onmouseenterイベントは、マウスポインタを要素に移動すると発生します。

ので、 変更この：

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

へ：

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