.addEventListener 不是函数

Question

document.body.addEventListener("mousemove", onMouseMove);
for (let i = 0; i < "hoverable".length; i++) {
  "hoverables" [i].addEventListener("mouseenter", onMouseHover);
  "hoverables" [i].addEventListener("mouseleave", onMouseHoverOut);
}

<div className="cursor">
  <div className="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
    <circle cx="15" cy="15" r="12" strokeWidth="0"></circle>
    </svg>
  </div>
  <div className="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
    <circle cx="5" cy="5" r="4" strokeWidth="0"></circle>
    </svg>
  </div>
</div>
<div className="left">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a className="hoverable">Hover meh</a>
</div>
<div className="right">
  <h1>Hello</h1>
  <p>Check out this link:</p>
  <a className="hoverable">Hover meh</a>
</div>

反应给出错误

“hoverables”[i].addEventListener 不是函数
类型错误：“hoverables”[i].addEventListener 不是函数

请修复它任何人

Answer 1

您可能想要做的是获取具有该类名的元素列表，而不是尝试向字符串添加事件侦听器。

let hoverables = document.querySelectorAll('.hoverable');

for (let i = 0; i < hoverables.length; i++) {
  hoverables[i].addEventListener("mouseenter", onMouseHover);
  hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
}