JS新手求助：如何为类名含连字符的元素绑定onmouseenter事件

嘿，作为JavaScript新手碰到这个问题太正常啦～先帮你理清一下：你之前直接写bigouterblock.onmouseenter能生效，大概率是因为那个外层元素其实用了id="bigouterblock"（浏览器有个旧特性，会把带id的元素自动挂载为全局变量），但如果是类名的话，这种写法是行不通的，得用标准的DOM选择器来获取元素才行。

下面给你两种常见的实现方式，根据你的页面情况选就行：

1. 页面只有一个.inner-block元素 #

用document.querySelector()来获取这个元素，然后像你之前那样绑定事件：

// 先获取内层元素
const innerBlock = document.querySelector('.inner-block');
// 绑定鼠标进入事件
innerBlock.onmouseenter = function(e) {
  console.log("My mouse is in inner block");
};

2. 页面有多个.inner-block元素 #

如果页面里有多个带这个类名的div，就得用document.querySelectorAll()获取所有匹配的元素，然后遍历每个元素绑定事件：

// 获取所有内层元素
const innerBlocks = document.querySelectorAll('.inner-block');
// 遍历每个元素绑定事件
innerBlocks.forEach(block => {
  block.onmouseenter = function(e) {
    console.log("Mouse entered an inner block");
  };
});

顺便提一句：哪怕是给id元素绑定事件，也更推荐用document.getElementById()或者querySelector()来获取元素，而不是直接用全局变量的方式，这样代码更清晰，也避免全局变量冲突的问题～

内容的提问来源于stack exchange，提问作者Иван Клёнов