13. 表单事件与键盘事件

表单事件管"输入框什么时候算改完"：input 边打边触发（打一个字跑一次），change 是失焦且真改了才触发，submit 是点提交按钮时触发（要记得拦住它）。键盘事件用 e.key 知道你按了哪个键，"按回车就搜索"就是靠它。

13.1 互动演示（边输入边看）

已输入 0 个字

打字、点别处失焦、按回车、点提交，看事件日志。

13.2 知识点逐条讲解

① 表单事件表

事件	什么时候跑
input	内容一变就跑（边打边跑）
change	失焦且内容真变了才跑
focus / blur	获得光标 / 失去光标
submit	点提交按钮时跑（可以拦默认提交）

let kw = document.getElementById('kw'); // 抓到那个输入框
kw.addEventListener('input', function () { // 内容一变就跑（边打边跑）
  // 边打边更新字数
  lenTip.textContent = '已输入 ' + this.value.length + ' 个字'; // 把字数显示出去
});

② submit 一定要拦默认动作

let form = document.getElementById('demoForm'); // 抓到整个表单
form.addEventListener('submit', function (e) { // 点提交按钮时跑这个
  e.preventDefault(); // 先拦住默认提交，不写它页面就整个刷新白屏了！
  console.log('统一校验后再决定真不真提交'); // 这里做校验
});

如果你点了提交按钮页面整个刷新白屏了，多半是漏了 e.preventDefault()。因为表单天生就会"提交+刷新"，做单页校验第一件事就是先拦住它。

③ 键盘事件与 e.key（回车搜索）

kw.addEventListener('keydown', function (e) { // 按下键盘任一键就跑这个
  console.log('你按了：' + e.key); // e.key 告诉你按的是哪个键
  if (e.key === 'Enter') {        // 如果按的是回车
    console.log('搜索：' + this.value); // 就把内容拿去搜索
  }
});

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：实时字数统计、回车搜索、登录表单提交校验。

② 常见坑：点提交页面整个刷新；按回车没反应。

③ 怎么解决：submit 里加 e.preventDefault()；键盘用 e.key === 'Enter' 判断回车。

一句话记住：input 边打边跑、change 失焦才跑、submit 要 preventDefault 拦；键盘用 e.key，e.key==='Enter' 做回车搜索。