Question

现在，我正在使用jQuery查找元素并附加事件侦听器。我不想再使用jQuery。

this.$('.my-class').off().on({
   mouseenter : this.handleMouseOverEvent.bind(this),
   mouseleave : this.handelMouseLeaveEvent.bind(this),
   click : this.handelMouseLeaveEvent.bind(this),
});

如何仅使用纯Javascript附加事件监听器？

Answer 1

使用querySelectorAll选择元素，并使用addEventListener将侦听器绑定到事件。

可以使用removeEventListener删除事件监听器。但是，您必须手动删除侦听器。 Javascript不会像jQuery的off那样为您跟踪它们。

在这里，浏览器支持：

document.querySelectorAll('.my-class')
  .forEach(element => {
    element.addEventListener('mouseover', () => element.style.backgroundColor = 'green');
    element.addEventListener('mouseout', () => element.style.backgroundColor = 'transparent');
  });

<!doctype html>
<html>
  <head>
    <title>Bind event handlers</title>
  </head>
  <body>
    <ul>
      <li class="my-class">hover me</li>
      <li class="my-class">hover me</li>
    </ul>
  </body>
</html>

查找所有元素并附加事件侦听器

1 个答案: