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

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) {&nbsp; &nbsp;console.log(e.target.getAttribute('data-animal'));}const mouseOverLoop = document.querySelectorAll("li");for (let i = 0; i < mouseOverLoop.length; i++) {&nbsp; console.log(mouseOverLoop[i]);&nbsp; mouseOverLoop[i].addEventListener("mouseover", hoverOver);}function hoverOver(e) {&nbsp; &nbsp;console.log(e.target.getAttribute('data-animal'));}<ul>&nbsp; &nbsp; <li data-animal="horse">Animal 1</li>&nbsp; &nbsp; <li data-animal="dog">Animal 2</li>&nbsp; &nbsp; <li data-animal="cat">Animal 3</li></ul>

Answer 2

<ul id="animals">&nbsp; &nbsp; <li data-animal="horse">Animal 1</li>&nbsp; &nbsp; <li data-animal="dog">Animal 2</li>&nbsp; &nbsp; <li data-animal="cat">Animal 3</li></ul>document.getElementById("animals").addEventListener("mouseover", function({ target: { dataset } }) {&nbsp; if (dataset.animal) {&nbsp; &nbsp; console.log(dataset.animal);&nbsp; }});