js中的DOM0,DOM2,DOM3

文章类型:Javascript

发布者:hp

发布时间:2023-04-06

DOM0,DOM2和DOM3是用于处理JavaScript事件的三种不同的事件处理方式。它们之间的主要区别在于事件监听器的添加和删除方式,以及事件对象的属性和方法。

通常,DOM2和DOM3事件处理方式更加灵活和可扩展

一:DOM0

1:事件处理方式是最早的事件处理方式,它是通过将事件处理程序直接赋值给元素的属性来实现的

2:清理dom0 事件时,只需给该事件赋值为 null

3. 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数

4. 不存在兼容性问题

const button = document.getElementById("myButton");
button.onclick = function() {
alert("Button clicked!");
};

二:DOM2

1:事件处理方式提供了一种更加灵活的方式来处理事件,它引入了事件监听器的概念。通过调用元素的addEventListener()方法,

2:可以向元素添加多个事件监听器

3:清除 dom2 事件时,使用 removeEventListener

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});

button.addEventListener("click", function() {
alert("Another click handler");
});

三:DOM3事件包含捕获阶段、处于目标阶段和事件冒泡阶段

1:处理方式引入了一些新的事件类型,例如,键盘事件、鼠标滚轮事件、触摸事件等,以及更多的事件处理程序选项

document.addEventListener('keydown', function(event) {
console.log('Key pressed: ' + event.keyCode);
});