JS中的三种事件模型

JavaScript 中的事件模型主要有三种：

1. 传统事件模型（DOM Level 0）
2. 标准事件模型（DOM Level 2）
3. IE 事件模型（非标准，仅限于旧版本的 Internet Explorer）

下面分别介绍这三种事件模型：

1. 传统事件模型（DOM Level 0）

传统事件模型是最早的事件处理方式，它通过将事件处理函数直接赋值给 HTML 元素的属性或 DOM 对象的属性来实现。这种方式简单直观，但功能有限，不支持事件捕获和事件流的概念。

示例代码：

// 通过 HTML 属性绑定事件
<button onclick="handleClick()">Click me</button>

// 通过 DOM 对象属性绑定事件
var button = document.getElementById('myButton');
button.onclick = function() {
    console.log('Button clicked');
};

2. 标准事件模型（DOM Level 2）

标准事件模型是由 W3C 定义的，它引入了事件捕获和事件冒泡的概念，并提供了 addEventListener 和 removeEventListener 方法来绑定和解绑事件处理函数。这种方式更加灵活和强大，支持多个事件处理函数绑定到同一个事件上。

示例代码：

// 使用 addEventListener 绑定事件
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log('Button clicked');
}, false); // 第三个参数表示是否在捕获阶段处理事件，默认为 false（冒泡阶段）

// 使用 removeEventListener 解绑事件
button.removeEventListener('click', function() {
    console.log('Button clicked');
}, false);

3. IE 事件模型（非标准）

IE 事件模型是旧版本 Internet Explorer 浏览器使用的事件处理方式，它与标准事件模型类似，但使用的是 attachEvent 和 detachEvent 方法，并且只支持事件冒泡，不支持事件捕获。

示例代码：

// 使用 attachEvent 绑定事件
var button = document.getElementById('myButton');
button.attachEvent('onclick', function() {
    console.log('Button clicked');
});

// 使用 detachEvent 解绑事件
button.detachEvent('onclick', function() {
    console.log('Button clicked');
});