事件与 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),以便能够将相同的函数值传递给这两个方法。