03. 事件处理：点击、输入、键盘与事件委托

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

搜索菜单

三、知识点提醒

事件回调里的 `event.target` 表示真正触发事件的元素。
事件委托适合列表、菜单、表格等动态内容。
键盘事件常用于搜索框、快捷键和表单体验优化。

四、练习建议

增加双击 `dblclick` 事件。
让搜索关键字实时过滤菜单按钮。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/03-events.js，下面同步展示，方便学习和复制。

// 页面 03：事件监听、事件对象、键盘事件、事件委托
const searchInput = document.querySelector('#p3-search');
const menu = document.querySelector('#p3-menu');
const eventOutput = document.querySelector('#p3-output');

function writeLog(message) {
  const time = new Date().toLocaleTimeString();
  eventOutput.textContent = `[${time}] ${message}`;
}

searchInput.addEventListener('input', (event) => {
  const keyword = event.target.value.trim().toLowerCase();
  writeLog(`正在输入：${keyword || '空'}`);
});

searchInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    writeLog(`按下 Enter，准备搜索：${searchInput.value}`);
  }

  if (event.key === 'Escape') {
    searchInput.value = '';
    writeLog('按下 Escape，已清空搜索框');
  }
});

// 事件委托：只给父元素绑定一次事件，子按钮都能响应
menu.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-product]');
  if (!button) return;

  const product = button.dataset.product;
  writeLog(`你选择了：${product}`);

  menu.querySelectorAll('button').forEach((item) => item.classList.remove('active'));
  button.classList.add('active');
});