DOM 注册事件
使用 JavaScript 为 DOM 元素注册事件的方式有多种。但是并不是一开始就设计了多种方式,而是随着技术的发展,发展前一种方式有所缺陷,所以设计了新的 DOM 元素注册事件的方式。
这里我们就一起来总结一下 DOM 中注册事件的方式有哪些。
HTML 元素中注册事件
HTML 元素中注册的事件,又被称之为行内事件监听器。这是在浏览器中处理事件最原始的方法。
具体的示例如下:
<button onclick="onClick('codereasy')">按钮</button>
function onClick(param) {
console.log(`你点击了按钮,${param}`);
}
在上面的代码中,我们为 button 元素添加了 onclick 属性,然后绑定了一个名为 onclick 的事件处理器。
在 JavaScript 中只需要书写对应的 onclick 事件处理函数即可。
但是有一点需要注意,就是这种方法已经过时了,原因如下:
- JavaScript 代码与 HTML 标记混杂在一起,破坏了结构和行为分离的理念。
- 每个元素只能为每种事件类型绑定一个事件处理器。
- 事件处理器的代码隐藏于标记中,很难找到事件是在哪里声明的。
但是如果是做简单的事件测试,那么这种写法还是非常方便快捷的。
DOM 方式注册事件
这种方式是首先取到要为其绑定事件的元素节点对象,然后给这些节点对象的事件处理属性赋值一个函数。
这样就可以达到 JavaScript 代码和 HTML 代码相分离的目的。
具体的示例如下:
<button id="test">点击我</button>
var button = document.getElementById("myButton");
button.onclick = function() {
console.log("按钮被点击");
}
这种方式虽然相比 HTML 元素中注册事件有所改进,但是它也有一个缺点,那就是它依然存在每个元素只能绑定一个函数的局限性。
下面我们尝试使用这种方式为同一个元素节点绑定 2 个事件,如下:
var button = document.getElementById("myButton");
button.onclick = function() {
console.log("点击事件1");
};
button.onclick = function() {
console.log("点击事件2");
};
当我们为该 DOM 元素绑定 2 个相同类型的事件时,后面的事件处理函数就会把前面的事件处理函数给覆盖掉。
添加事件监听器
DOM2 级再次对事件的绑定方式进行了改进。
DOM2 级通过 addEventListener 方法来为一个 DOM 元素添加多个事件处理函数。
该方法接收 3 个参数:事件名、事件处理函数、布尔值。
如果这个布尔值为 true,则在捕获阶段处理事件,如果为 false,则在冒泡阶段处理事件。若最后的布尔值不填写,则和 false 效果一样,也就是说默认为 false,在冒泡阶段进行事件的处理。
接下来我们来看下面的示例:这里我们为 button 元素绑定了 2 个事件处理程序,并且 2 个事件处理程序都是通过点击来触发。
var button = document.getElementById("myButton");
button.addEventListener('click', function() {
console.log("点击事件1");
});
button.addEventListener('click', function() {
console.log("点击事件2");
});
在上面的代码中,我们通过 addEventListener 为按钮绑定了 2 个点击的事件处理程序,2 个事件处理程序都会执行。
另外需要注意的是,在 IE 中和 addEventListener 方法与之对应的是 attachEvent 方法。
var button = document.getElementById("myButton");
if (button.addEventListener) {
// 支持addEventListener的浏览器
button.addEventListener('click', myFunction, false);
} else if (button.attachEvent) {
// 老版本IE浏览器
button.attachEvent('onclick', myFunction);
}
function myFunction() {
console.log("按钮被点击");
}
DOM 移除事件
在JavaScript中,通过onclick属性添加的事件可以通过将onclick属性设置为null来移除。这将会移除该元素的onclick事件处理器。例如:
var button = document.getElementById("myButton");
// 添加一个事件处理器
button.onclick = function() {
console.log("按钮被点击");
};
// 移除事件处理器
button.onclick = null;
在这个例子中,我们首先给按钮添加了一个点击事件处理器,这个处理器会在控制台输出"按钮被点击"。然后我们通过将按钮的onclick属性设置为null来移除这个事件处理器。移除事件处理器后,点击按钮将不会有任何效果。
如果你是通过 addEventListener 方法添加的事件处理器,那么你需要使用 removeEventListener 方法来移除它。
下面是一个例子:
var button = document.getElementById("myButton");
// 定义一个事件处理器
function handleClick() {
console.log("按钮被点击");
}
// 添加一个事件处理器
button.addEventListener('click', handleClick);
// 移除事件处理器
button.removeEventListener('click', handleClick);
在这个例子中,我们首先定义了一个名为 handleClick 的事件处理器。然后,我们使用 addEventListener 方法将 handleClick 添加为按钮的点击事件处理器。最后,我们使用 removeEventListener 方法移除了 handleClick 事件处理器。
值得注意的是, removeEventListener 需要和 addEventListener 使用相同的参数(事件类型和处理器函数)。这意味着,如果你是通过 addEventListener 添加一个匿名函数作为事件处理器,你将无法使用 removeEventListener 来移除它,因为匿名函数无法被重新引用。所以,在可能需要移除事件处理器的情况下,最好使用具名函数。