JS中dom0级事件和dom2级事件的区别介绍

JS中事件分为DOM0级事件和DOM2级事件。

DOM0 级事件：是将一个函数赋值给一个事件处理程序属性，如下所示：

document.getElementById("button").onclick = function(){
   alert("Hello World!");
}

DOM2级事件：定义了两个方法 用于指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。通过先调用 addEventListener() 方法然后在以后调用 removeEventListener()方法，来添加和删除事件处理程序，如下所示：

document.getElementById("button").addEventListener("click", function(){
   alert("Hello World!");
});

DOM2级事件除了可以在冒泡阶段处理事件之外，还可以指定事件处理程序的执行顺序、针对同一个元素绑定多个事件、移除事件处理程序等。

下面举两个示例说明：

1. 示例一

//DOM0级事件
var btn1 = document.getElementById("button1");
btn1.onclick = function(){
    console.log("DOM0级事件");
}

//DOM2级事件
var btn2 = document.getElementById("button2");
btn2.addEventListener("click", function(){
    console.log("DOM2级事件");
},false);

1. 示例二

//DOM0级事件
var btn1 = document.getElementById("button1");
btn1.onclick = function(){
    console.log("DOM0级事件");
}

//DOM2级事件
var btn2 = document.getElementById("button2");
btn2.addEventListener("click", function(){
    console.log("DOM2级事件");
},true);

这两个示例中，分别演示了DOM0级事件和DOM2级事件的使用。第一个示例中，我们分别使用了DOM0级事件和DOM2级事件来添加事件处理函数，在点击按钮后，分别输出“DOM0级事件”和“DOM2级事件”。

第二个示例中，我们在DOM2级事件中指定了事件处理程序在捕获阶段执行而不是在冒泡阶段执行，这里设置为 true。在这个示例中，我们点击按钮后，只输出了“DOM2级事件”，并没有输出“DOM0级事件”。这表明DOM0级事件只支持在冒泡阶段执行，而DOM2级事件可以在捕获阶段和冒泡阶段执行。