前端视差滚动区域鼠标悬停触发函数问题求助

我是前端开发新手，希望鼠标悬停在两段文本之间的parallax视差滚动区域时触发DOM修改函数，但当前JavaScript代码中的函数在页面加载后立即执行，而非悬停时触发。相关代码如下：

HTML代码 #

<h1> Test </h1>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget pharetra orci. Duis venenatis condimentum nisl sed viverra. Cras eu ex leo. Fusce non sagittis nibh. Nulla facilisi. Cras malesuada lacinia ex non dapibus. Nulla risus tortor, blandit ut scelerisque ut, scelerisque ac ligula.

Nunc imperdiet, justo a condimentum lacinia, nibh sem lacinia arcu, sed sagittis justo eros eget diam. In neque nisi, dignissim vel sapien aliquet, tincidunt iaculis mauris. Morbi in urna augue. Duis augue arcu, pharetra vel velit at, iaculis tempor magna. Integer tincidunt odio ac viverra feugiat. Sed eu egestas lorem. Donec interdum non nisi quis ultricies. In gravida sit amet sapien non malesuada. Praesent ullamcorper mi id turpis suscipit ultricies. Duis viverra id justo a dignissim.

Etiam at lectus non odio elementum consectetur. Aenean vitae condimentum libero, et pellentesque nulla. In maximus felis erat, vulputate consectetur arcu pretium vehicula. Maecenas volutpat finibus lobortis. Pellentesque at odio mollis, lobortis quam ac, semper sapien. Nunc venenatis ante diam, quis tristique turpis commodo quis. Morbi gravida ullamcorper ligula, ut aliquet nunc euismod a. Nulla tempor interdum nunc, sit amet bibendum leo malesuada nec. Pellentesque enim urna, maximus eget tempus eu, mattis quis ante. Nullam ac arcu nec elit eleifend congue ut ut ligula.

Proin in ligula elit. Praesent pharetra mi id dui auctor, nec rhoncus nunc vulputate. Vestibulum vel nulla id eros blandit placerat in at purus. Integer sollicitudin congue feugiat. Etiam molestie venenatis felis, id posuere nibh ultrices a. Cras semper arcu vitae justo dictum dapibus. Donec pulvinar, nibh et laoreet sodales, massa nunc rhoncus tellus, lobortis ullamcorper velit ligula at tellus. Vestibulum commodo tellus leo, in hendrerit magna sodales eget. Sed nisl purus, scelerisque id ipsum id, placerat lacinia turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit faucibus mauris eu viverra. Maecenas magna nunc, posuere at orci tincidunt, bibendum euismod turpis. Ut aliquet metus quis felis pharetra, at dapibus neque pharetra. Vestibulum vel enim tellus.

Ut sollicitudin leo in velit volutpat porttitor. Sed suscipit sem lorem, eget finibus lectus dapibus a. Vestibulum ultricies dapibus leo, et congue tellus condimentum eget. Donec rhoncus, velit vel aliquam consectetur, lectus nisl posuere dui, a eleifend ex urna id justo. Praesent vitae libero at ex facilisis rhoncus vitae mattis felis. Quisque sed mi lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sit amet iaculis nulla. Vestibulum semper justo quis orci dapibus vehicula ac quis sem. Integer facilisis vitae dolor eu accumsan. Proin a velit sed ex sollicitudin iaculis. Aliquam scelerisque ipsum sit amet euismod suscipit.
</p>

<div class="parallax">
    <h1>This is a test heading 1</h1>
    <h1>This is a test heading 2</h1>
</div>

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget pharetra orci. Duis venenatis condimentum nisl sed viverra. Cras eu ex leo. Fusce non sagittis nibh. Nulla facilisi. Cras malesuada lacinia ex non dapibus. Nulla risus tortor, blandit ut scelerisque ut, scelerisque ac ligula.

Nunc imperdiet, justo a condimentum lacinia, nibh sem lacinia arcu, sed sagittis justo eros eget diam. In neque nisi, dignissim vel sapien aliquet, tincidunt iaculis mauris. Morbi in urna augue. Duis augue arcu, pharetra vel velit at, iaculis tempor magna. Integer tincidunt odio ac viverra feugiat. Sed eu egestas lorem. Donec interdum non nisi quis ultricies. In gravida sit amet sapien non malesuada. Praesent ullamcorper mi id turpis suscipit ultricies. Duis viverra id justo a dignissim.

Etiam at lectus non odio elementum consectetur. Aenean vitae condimentum libero, et pellentesque nulla. In maximus felis erat, vulputate consectetur arcu pretium vehicula. Maecenas volutpat finibus lobortis. Pellentesque at odio mollis, lobortis quam ac, semper sapien. Nunc venenatis ante diam, quis tristique turpis commodo quis. Morbi gravida ullamcorper ligula, ut aliquet nunc euismod a. Nulla tempor interdum nunc, sit amet bibendum leo malesuada nec. Pellentesque enim urna, maximus eget tempus eu, mattis quis ante. Nullam ac arcu nec elit eleifend congue ut ut ligula.

Proin in ligula elit. Praesent pharetra mi id dui auctor, nec rhoncus nunc vulputate. Vestibulum vel nulla id eros blandit placerat in at purus. Integer sollicitudin congue feugiat. Etiam molestie venenatis felis, id posuere nibh ultrices a. Cras semper arcu vitae justo dictum dapibus. Donec pulvinar, nibh et laoreet sodales, massa nunc rhoncus tellus, lobortis ullamcorper velit ligula at tellus. Vestibulum commodo tellus leo, in hendrerit magna sodales eget. Sed nisl purus, scelerisque id ipsum id, placerat lacinia turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit faucibus mauris eu viverra. Maecenas magna nunc, posuere at orci tincidunt, bibendum euismod turpis. Ut aliquet metus quis felis pharetra, at dapibus neque pharetra. Vestibulum vel enim tellus.

Ut sollicitudin leo in velit volutpat porttitor. Sed suscipit sem lorem, eget finibus lectus dapibus a. Vestibulum ultricies dapibus leo, et congue tellus condimentum eget. Donec rhoncus, velit vel aliquam consectetur, lectus nisl posuere dui, a eleifend ex urna id justo. Praesent vitae libero at ex facilisis rhoncus vitae mattis felis. Quisque sed mi lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sit amet iaculis nulla. Vestibulum semper justo quis orci dapibus vehicula ac quis sem. Integer facilisis vitae dolor eu accumsan. Proin a velit sed ex sollicitudin iaculis. Aliquam scelerisque ipsum sit amet euismod suscipit.
</p>

CSS代码 #

.parallax {
  /* The image used */
  background-image: url("https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax h1{
    color: white;
}

当前JavaScript代码 #

const parallax = document.getElementsByClassName("parallax")[0];
parallax.addEventListener("mouseenter",alert("test!"));

我的最终目标是触发函数后在两个<h1>标签间插入新元素，目前仅需解决鼠标悬停触发时机的问题。

问题根源 #

你直接将alert("test!")作为参数传递给addEventListener，这会导致该函数在注册事件时立即执行，而不是将函数作为回调绑定到mouseenter事件上。addEventListener的第二个参数需要接收一个函数引用，而非函数执行的结果。

修正后的基础代码 #

将执行语句包裹在匿名函数中，这样只有当鼠标悬停事件触发时，才会执行函数内的代码：

const parallax = document.getElementsByClassName("parallax")[0];
parallax.addEventListener("mouseenter", function() {
  alert("test!");
  // 后续可在此添加DOM修改逻辑
});

或者使用更简洁的箭头函数写法：

const parallax = document.getElementsByClassName("parallax")[0];
parallax.addEventListener("mouseenter", () => {
  alert("test!");
});

实现最终目标：在两个h1间插入元素 #

如果要实现悬停时在两个<h1>之间插入新元素，可以参考以下代码（加入了重复插入的判断逻辑）：

const parallax = document.getElementsByClassName("parallax")[0];
parallax.addEventListener("mouseenter", () => {
  // 检查是否已存在插入的元素，避免重复添加
  const existingElement = parallax.querySelector(".inserted-element");
  if (!existingElement) {
    const newElement = document.createElement("p");
    newElement.textContent = "这是插入的新内容";
    newElement.className = "inserted-element";
    newElement.style.color = "white"; // 适配背景色，让文字可见
    
    // 获取第一个h1，将新元素插入到它后面
    const firstH1 = parallax.querySelector("h1:first-of-type");
    firstH1.insertAdjacentElement("afterend", newElement);
  }
});

内容的提问来源于stack exchange，提问作者Afif Malghani