编辑“︁HTML事件处理”︁（章节）

= HTML事件处理 =

'''HTML事件处理'''是网页开发中实现交互功能的核心机制，它允许JavaScript代码在用户操作（如点击、键盘输入等）或浏览器行为（如页面加载）发生时被触发。本条目将系统讲解事件处理模型、绑定方式、事件对象及实际应用。

== 基本概念 ==
事件（Event）指在HTML文档中发生的特定交互动作，分为三类：
* '''用户事件'''：点击（click）、鼠标移动（mousemove）、键盘按下（keydown）等
* '''浏览器事件'''：页面加载（load）、窗口调整大小（resize）等
* '''文档事件'''：DOM内容变化（DOMContentLoaded）等

事件处理（Event Handling）是通过JavaScript"监听"这些事件并执行对应函数的过程，其基本流程如下：

<mermaid>
graph LR
    A[事件发生] --> B[生成事件对象]
    B --> C[查找事件目标]
    C --> D[执行绑定的事件处理函数]
</mermaid>

== 事件绑定方法 ==
=== HTML属性绑定 ===
最直接的方式是通过HTML元素的<code>on<event></code>属性：

<syntaxhighlight lang="html">
<button onclick="alert('按钮被点击')">点击我</button>
</syntaxhighlight>

'''输出效果'''：点击按钮后显示浏览器弹窗"按钮被点击"

=== DOM属性绑定 ===
通过JavaScript直接设置DOM元素的属性：

<syntaxhighlight lang="html">
<button id="myBtn">点击我</button>
<script>
  document.getElementById('myBtn').onclick = function() {
    console.log('按钮被点击');
  };
</script>
</syntaxhighlight>

'''控制台输出'''：点击按钮后在控制台打印"按钮被点击"

=== addEventListener() ===
推荐的标准方法，支持多个监听器：

<syntaxhighlight lang="javascript">
element.addEventListener('click', function(event) {
  console.log('事件类型：', event.type);
  console.log('触发元素：', event.target);
});
</syntaxhighlight>

== 事件对象 ==
当事件触发时，浏览器会创建包含事件信息的'''Event对象'''，常用属性包括：

{| class="wikitable"
! 属性 !! 描述
|-
| <code>target</code> || 触发事件的元素
|-
| <code>type</code> || 事件类型（如"click"）
|-
| <code>preventDefault()</code> || 阻止默认行为
|-
| <code>stopPropagation()</code> || 停止事件冒泡
|}

示例：阻止表单提交默认行为
<syntaxhighlight lang="javascript">
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('表单提交被拦截');
});
</syntaxhighlight>

== 事件传播机制 ==
DOM事件采用'''三阶段传播模型'''：

<mermaid>
graph TD
    A[捕获阶段 Capture] --> B[目标阶段 Target]
    B --> C[冒泡阶段 Bubble]
</mermaid>

可通过<code>addEventListener</code>的第三个参数控制监听阶段：
<syntaxhighlight lang="javascript">
// 捕获阶段监听
element.addEventListener('click', handler, true);

// 冒泡阶段监听（默认）
element.addEventListener('click', handler, false);
</syntaxhighlight>

== 实际应用案例 ==
=== 动态内容加载 ===
<syntaxhighlight lang="html">
<div id="contentArea">初始内容</div>
<button id="loadBtn">加载新内容</button>

<script>
  document.getElementById('loadBtn').addEventListener('click', function() {
    document.getElementById('contentArea').innerHTML = 
      '<p>新加载的内容：' + new Date().toLocaleTimeString() + '</p>';
  });
</script>
</syntaxhighlight>

=== 键盘快捷键实现 ===
<syntaxhighlight lang="javascript">
document.addEventListener('keydown', function(e) {
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    console.log('保存操作被触发');
  }
});
</syntaxhighlight>

== 高级主题 ==
=== 事件委托 ===
利用事件冒泡优化性能：
<syntaxhighlight lang="javascript">
document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('点击的列表项：', e.target.textContent);
  }
});
</syntaxhighlight>

=== 自定义事件 ===
创建和触发自定义事件：
<syntaxhighlight lang="javascript">
// 创建事件
const event = new CustomEvent('build', { detail: { time: Date.now() } });

// 监听事件
elem.addEventListener('build', function(e) {
  console.log('自定义事件数据：', e.detail);
});

// 触发事件
elem.dispatchEvent(event);
</syntaxhighlight>

== 最佳实践 ==
* 优先使用<code>addEventListener</code>而非HTML属性
* 复杂逻辑应提取为独立函数
* 及时移除不需要的事件监听（<code>removeEventListener</code>）
* 使用事件委托处理动态元素
* 避免在事件处理中进行耗时操作

== 参见 ==
* [[DOM操作]]
* [[JavaScript函数]]
* [[异步JavaScript]]

[[Category:HTML]]
[[Category:网页开发]]
[[Category:前端技术]]

[[Category:编程语言]]
[[Category:HTML与JavaScript交互]]