事件与 DOM 节点
每个浏览器事件处理器被注册在上下文中。在为整个窗口注册处理器之前,我们在window
对象上调用了addEventListener
。 这种方法也可以在 DOM 元素和一些其他类型的对象上找到。 仅当事件发生在其注册对象的上下文中时,才调用事件监听器。
<button>Click me</button>
<p>No handler here.</p>
<script>
let button = document.querySelector("button");
button.addEventListener("click", () => {
console.log("Button clicked.");
});
</script>
示例代码中将处理器附加到按钮节点上。因此,点击按钮时会触发并执行处理器,而点击文档的其他部分则没有反应。
向节点提供onclick
属性也有类似效果。这适用于大多数类型的事件 - 您可以为属性附加处理器,属性名称为前面带有on
的事件名称。
但是一个节点只能有一个onclick
属性,所以你只能用这种方式为每个节点注册一个处理器。 addEventListener
方法允许您添加任意数量的处理器,因此即使元素上已经存在另一个处理器,添加处理器也是安全的。
removeEventListener
方法将删除一个处理器,使用类似于addEventListener
的参数调用。
<button>Act-once button</button>
<script>
let button = document.querySelector("button");
function once() {
console.log("Done.");
button.removeEventListener("click", once);
}
button.addEventListener("click", once);
</script>
赋予removeEventListener
的函数必须是赋予addEventListener
的完全相同的函数值。 因此,要注销一个处理其,您需要为该函数提供一个名称(在本例中为once
),以便能够将相同的函数值传递给这两个方法。