如何获得回调函数以记录鼠标悬停时数据属性的值？

Question

所以我在此处选择了一个 'li' 列表，并且我正在使用 for 循环为每个标签添加鼠标悬停事件侦听器。

<ul>
    <li data-animal="horse">Animal 1</li>
    <li data-animal="dog">Animal 2</li>
    <li data-animal="cat">Animal 3</li>
</ul>

我停下来了，因为 回调函数 应该记录每个 的 value数据属性 当鼠标移到它上面时。我怎样才能做到这一点？

const mouseOverLoop = document.querySelectorAll("li");
for (let i = 0; i < mouseOverLoop.lenght; i++) {
  mouseOverLoop[i].addEventListener("mouseover", hoverOver);
}
function hoverOver() {
  console.log();
}

Answer 1

有2个问题：

打错了，应该是mouseOverLoop.length（不是lenght）
console.log() 没有要记录的字符串。

您可以使用事件的 target 属性来识别适当的元素，并使用 getAttribute 方法来获取属性值。

function hoverOver(e) {
   console.log(e.target.getAttribute('data-animal'));
}

const mouseOverLoop = document.querySelectorAll("li");
for (let i = 0; i < mouseOverLoop.length; i++) {
  console.log(mouseOverLoop[i]);
  mouseOverLoop[i].addEventListener("mouseover", hoverOver);
}
function hoverOver(e) {
   console.log(e.target.getAttribute('data-animal'));
}

<ul>
    <li data-animal="horse">Animal 1</li>
    <li data-animal="dog">Animal 2</li>
    <li data-animal="cat">Animal 3</li>
</ul>

Answer 2

<ul id="animals">
    <li data-animal="horse">Animal 1</li>
    <li data-animal="dog">Animal 2</li>
    <li data-animal="cat">Animal 3</li>
</ul>

document.getElementById("animals").addEventListener("mouseover", function({ target: { dataset } }) {
  if (dataset.animal) {
    console.log(dataset.animal);
  }
});

如何获得回调函数以记录鼠标悬停时数据属性的值？

How do I get the call back function to log the value of the data attribute with mouseover?

javascript

loops

mouseover

addeventlistener