JavaScript的事件机制详解

事件机制是 JavaScript 重要的一部分，它使得 Web 应用得以用户交互和响应。在本文中，我将详细讲解 JavaScript 的事件机制，包括事件模型、事件流以及事件捕获和冒泡。

事件模型

JavaScript 事件模型是一种基于事件触发的编程模型。当用户操作网页中的元素（如按钮、文本输入框等）时，会触发事件，JavaScript 可以通过监听这些事件来触发相关的操作。

事件模型分为两种：DOM0 和 DOM2。

DOM0 事件模型

DOM0 事件模型是最简单的一种模型，通过直接给元素添加相应的事件处理函数来实现。例如，下面的代码将在按钮被点击时触发一个 alert 对话框：

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

DOM2 事件模型

DOM2 事件模型引入了新的概念和方法来处理事件，包括事件源对象、事件监听器和事件流。通过这种模型，我们可以更加灵活地处理事件。例如，下面的代码会在按钮被点击时触发一个事件监听器：

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

事件流

事件流是指从页面中接收事件的顺序。事件流有两种：冒泡和捕获。

冒泡事件流

在冒泡事件流中，事件从被单击的元素开始向上冒泡直到到达文档根节点。例如，当按钮被单击时，事件将从按钮元素开始向上传递，然后传递到按钮的父级元素，再传递到按钮的祖先元素，一直到传递到文档根节点。

捕获事件流

在捕获事件流中，事件从文档根节点开始，向下传播直到到达触发事件的元素。例如，当按钮被单击时，事件将从文档根节点开始，传递到按钮的祖先元素，再传递到按钮的父级元素，最后到达按钮元素。

事件捕获和冒泡

JavaScript 事件模型中的事件捕获和事件冒泡是常见的两种事件模型，它们是基于事件流实现的。

事件捕获

事件捕获是在冒泡阶段之前触发的。在事件捕获阶段，事件从文档根节点开始传递直到触发事件的元素。在捕获阶段中，父级元素会比子级元素先接收到事件。

var div = document.getElementById("myDiv");
div.addEventListener("click", function() {
    console.log("div clicked!");
}, true);

事件冒泡

事件冒泡是在捕获阶段之后触发的。在事件冒泡阶段，事件从触发事件的元素开始向上冒泡，直到文档根节点。在冒泡阶段中，子级元素会比父级元素先接收到事件。

var div = document.getElementById("myDiv");
div.addEventListener("click", function() {
    console.log("div clicked!");
}, false);

示例说明

示例一：捕获和冒泡的区别

<div id="outer">
    <div id="inner">
        Click me!
    </div>
</div>

var outer = document.getElementById("outer"),
    inner = document.getElementById("inner");

outer.addEventListener("click", function() {
    console.log("Outer clicked - capture");
}, true);

outer.addEventListener("click", function() {
    console.log("Outer clicked - bubble");
}, false);

inner.addEventListener("click", function() {
    console.log("Inner clicked - capture");
}, true);

inner.addEventListener("click", function() {
    console.log("Inner clicked - bubble");
}, false);

当点击 "Click me!" 时，控制台输出的内容为：

Outer clicked - capture
Inner clicked - capture
Inner clicked - bubble
Outer clicked - bubble

示例二：事件委托

事件委托是一种优化 JavaScript 事件处理性能的技术，通过在父级元素上绑定事件监听器，从而避免在子元素上绑定多个事件监听器。

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

var list = document.getElementById("myList");

list.addEventListener("click", function(event) {
    if (event.target && event.target.nodeName === "LI") {
        console.log("List item clicked - " + event.target.innerHTML);
    }
});

当点击列表项时，控制台输出的内容为：

List item clicked - Item 1
List item clicked - Item 2
List item clicked - Item 3

以上是“JavaScript的事件机制详解”的完整攻略。