DOM 事件

DOM 事件

DOM（文档对象模型）事件是JavaScript与网页交互的核心机制。它们允许开发者响应和捕获用户的行为，如点击、鼠标移动、键盘按键等，以及浏览器本身的动作，如页面加载完成。理解并有效地使用DOM事件对于创建动态和互动的网页至关重要。

基本概念

事件流

事件流描述了事件在DOM中的传播方式。主要有两种事件流模型：冒泡和捕获。

• 冒泡事件流：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
• 捕获事件流：与冒泡相反，事件从最不具体的节点开始，向下传播到最具体的节点。

事件处理程序

事件处理程序是响应事件的函数。在JavaScript中，可以通过多种方式指定事件处理程序：

• HTML内联属性：直接在HTML标签内使用事件属性，如onclick。
• DOM属性：在JavaScript中，通过元素的属性来设置事件处理程序，如element.onclick = function() {}。
• addEventListener方法：这是一种更现代、更灵活的方法，允许为一个事件添加多个处理程序，且可以指定事件流阶段（捕获或冒泡），如element.addEventListener('click', function() {}, false)。