Mouseenter 事件触发失败

Question

我有一组 3 个菜单项，我正在尝试向其中添加 mouseenter 事件。我似乎根本无法让它工作。我也尝试过遍历 .menu-item 类，但没有任何反应。

这让我发疯了。有谁知道为什么这不起作用？

非常感谢您的任何帮助

代码如下，Codepen 链接为：https://codepen.io/emilychews/pen/VzaOoe

（我也没有 jQuery 解决方案）。

JS

var menuItem = document.querySelectorAll('.menu-item');

  function myMouseEnter() {

    alert('mouse entered');

  }

menuItem.addEventListener('mouseenter', myMouseEnter, false)

使用循环注释掉的版本

//   function myMouseEnter() {

//     for(i=0; i < menuItem.length; i++){

//        alert ('mouse entered');
//       
//       }

//     }

//   menuItem.addEventListener('mouseenter', myMouseEnter, false)

CSS

.menu-item {
padding: 10px;
font-family: arial;
}

HTML

<ul class="unclick--menuitems">
  <li class="menu-item item1"><a href="//google.com">About</a></li>
  <li class="menu-item item2"><a href="//google.com">Work</a></li>
  <li class="menu-item item3"><a href="//google.com">Contact</a></li>
</ul>

Answer 1

您必须像这样迭代抛出集合并在每个元素上添加事件侦听器：

var menuItems = document.querySelectorAll('.menu-item');

function myMouseEnter() {
 alert('mouse entered');
}

for(var i=0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseenter', myMouseEnter, false);
}

Answer 2

JS 查询选择器将始终以数组的形式返回元素，所以在你的情况下你可以使用这样的东西，

var menuItems = document.querySelectorAll('.menu-item');

function myMouseEnter() {
 console.log('mouse entered');
}

menuItems[0].addEventListener('mouseenter', myMouseEnter);