事件与 DOM 节点

每个浏览器事件处理器被注册在上下文中。在为整个窗口注册处理器之前，我们在window对象上调用了addEventListener。 这种方法也可以在 DOM 元素和一些其他类型的对象上找到。 仅当事件发生在其注册对象的上下文中时，才调用事件监听器。

  1. <button>Click me</button>
  2. <p>No handler here.</p>
  3. <script>
  4.   let button = document.querySelector("button");
  5.   button.addEventListener("click", () => {
  6.     console.log("Button clicked.");
  7.   });
  8. </script>

示例代码中将处理器附加到按钮节点上。因此，点击按钮时会触发并执行处理器，而点击文档的其他部分则没有反应。

向节点提供onclick属性也有类似效果。这适用于大多数类型的事件 - 您可以为属性附加处理器，属性名称为前面带有on的事件名称。

但是一个节点只能有一个onclick属性，所以你只能用这种方式为每个节点注册一个处理器。 addEventListener方法允许您添加任意数量的处理器，因此即使元素上已经存在另一个处理器，添加处理器也是安全的。

removeEventListener方法将删除一个处理器，使用类似于addEventListener的参数调用。

  1. <button>Act-once button</button>
  2. <script>
  3.   let button = document.querySelector("button");
  4.   function once() {
  5.     console.log("Done.");
  6.     button.removeEventListener("click", once);
  7.   }
  8.   button.addEventListener("click", once);
  9. </script>

赋予removeEventListener的函数必须是赋予addEventListener的完全相同的函数值。 因此，要注销一个处理其，您需要为该函数提供一个名称（在本例中为once），以便能够将相同的函数值传递给这两个方法。