谈谈浏览器的DOM事件-从0级到2级

DOM0 级事件

特点： 这是最早期、最简单的一种事件处理方式。事件处理函数直接写在 HTML 标签的属性里。

语法：

html 复制代码

<button onclick="alert('按钮被点击了！')">点击我</button>
<a href="#" ondblclick="console.log('链接被双击了')">

优点：
- 无需 JavaScript 代码就可以触发事件。
缺点：
- HTML 和 JavaScript 混杂： 违反了关注点分离的原则，不利于代码维护。
- 只能绑定一个事件处理函数： 如果你在同一个元素上为同一个事件（例如 onclick）多次赋值，后面的会覆盖前面的。
- 优先级低： 在使用更高级的事件模型时，DOM0 级事件的处理函数会先于 DOM1/DOM2 级事件的函数执行，但它本身没有捕获和冒泡的概念，行为相对固定。
- 缺乏灵活性： 无法方便地动态添加或移除事件监听器。

DOM1级事件

严格来说，DOM 1 级规范并没有定义一个独立的"事件模型"。它主要关注 DOM 的结构（节点、属性、方法等）。但是，在 DOM 1 级规范发布后，浏览器为了实现一些基本的事件交互，开始自行扩展了一些 JavaScript 接口来处理事件

js 复制代码

// 获取元素
const myButton = document.getElementById('myBtn');

// 绑定事件处理函数 (通常通过 JS 属性)
myButton.onclick = function() {
    alert('按钮被点击了 (JS 属性方式)');
};

与 DOM0 级事件的对比：
- 优点： 将 JavaScript 代码与 HTML 分离，更符合"关注点分离"的原则。
- 缺点： 仍然只能绑定一个事件处理函数，后面的会覆盖前面的。缺乏灵活性。

DOM2级事件

DOM 2 级事件引入了更强大、更灵活的事件处理机制，并明确了事件的捕获和冒泡。

接口： addEventListener() 和 removeEventListener()

js 复制代码

// 获取元素
const myButton = document.getElementById('myBtn');

// 绑定事件处理函数
myButton.addEventListener('click', function() {
    alert('按钮被点击了 (addEventListener - bubbling)');
});

// 绑定事件处理函数 (可以绑定多个，互不影响)
myButton.addEventListener('click', function() {
    console.log('第二个点击事件处理函数');
});

myButton.removeEventListener('click', handleClick);

好处是可以为同一个元素、同一个事件绑定多个不同的处理函数，它们会按照添加的顺序（对于冒泡阶段）或反向顺序（对于捕获阶段）依次执行。