Проблема такая, когда навожу на первую строку с событием "mousemove", то текст находящийся в первой строке должен становится красным. Когда на вторую - синим. Но на выходе, как только мышь заходит на таблицу срабатывает сразу два обработчика. И текст и в первой и во второй строке становится окрашенным. Как пофиксить данную проблему.
function fn() {
let res = document.querySelector("table");
let resArray = Array.from(res.rows);
resArray.forEach((i, index) => {
if (index == 0) {
i.style.color = "red";
} else if (index == 1) {
i.style.color = "blue";
}
});
}
tableTest.addEventListener("mousemove", () => {
fn();
});
<table border="1" cellspacing="10" width="400" id="tableTest">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>