Question

我对JS很新，所以我的问题可能很愚蠢。

我有一些HTML：

<div class="bigouterblock">
  <div class="inner-block">
...some content here...
  </div>
</div>

每个班级都有适当的CSS风格。

我想为我的内部div处理 onmouseenter 事件。当我想为其他div做这个时，我可以在单独的.js文件中创建这样的东西：

bigouterblock.onmouseenter = function(e) 
{
  console.log("My mouse is in outer block"); 
};

但是如何为名为 “内部块” 的块执行此操作？ JavaScript将名称中的“ - ” 符号处理为减号，这是合理的。 但我真的想保留这个名字：）

我应该怎么做这么奇怪的事情？非常感谢。

Answer 1

如果bigouterblock.onmouseenter是其ID，而不是类，则只能查询此bigouterblock之类的元素。如果要按类查询，则应使用document.getElementsByClassName("inner-block")返回具有给定类名的所有元素。

for (let inner of document.getElementsByClassName("inner-block")) {
  inner.onmouseover = () => console.log("Over .inner-block");
}

<div class="bigouterblock">
  outer content
  <div class="inner-block">
    ...some content here...
  </div>
  outer content
</div>

Answer 2

这样做的一种方法是，如果你只有一个带有类内部块的div，可以是：

// selects the div element use an unique class name
var element = document.getElementsByClassName("inner-block")[0];
// adds the event listener mouse enter
element.addEventListener("mouseenter", function(e){
  console.log("My mouse has entered the element"); 
});

如果您只想将mouseenter功能添加到一个div或迭代所有元素并添加到每个事件监听器，我建议使用id而不是类选择器。

处理程序用于具有复杂名称的对象

2 个答案: