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);
});