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

Question

因此，我在这里选择了一个“li”列表，并且我正在使用 for 循环为每个标签添加一个 mouseover 事件侦听器。<ul>    <li data-animal="horse">Animal 1</li>    <li data-animal="dog">Animal 2</li>    <li data-animal="cat">Animal 3</li></ul>我停了下来，因为当鼠标移到每个数据属性上时，回调函数应该记录每个数据属性的值。我怎样才能做到这一点？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);

  }

});