前端Wiki/JavaScript/进阶/事件

事件监听 addEventListener

事件是「用户或浏览器做的某件事」：点击、输入、按键、滚动……JS 用 el.addEventListener('事件类型', 处理函数) 来监听。相比老的 onclick 属性写法，addEventListener 可以给同一元素绑定多个监听器、支持事件捕获配置，是标准做法。

必须掌握的事件类型：click（点击）、input（输入框每次输入）、change（值改变并失焦）、keydown（按下键盘）、submit（表单提交）、mouseenter/mouseleave（移入移出）、DOMContentLoaded（DOM 构建完成）。

addEventListener 的第三个参数支持选项对象，如 { once: true } 让事件只触发一次后自动解绑。解绑用 removeEventListener，注意必须传入同一个函数引用，匿名函数是解绑不掉的。

本节要点addEventListener(类型, 回调) 是标准监听方式；先记 click/input/keydown/submit 几个高频事件；{ once: true } 只触发一次；解绑必须传同一函数引用。

HTML

<button id="btn">点我</button>
<input id="inp" placeholder="在这里输入">
<script>
  const btn = document.getElementById('btn');
  const inp = document.getElementById('inp');

  btn.addEventListener('click', () => {
    console.log('按钮被点击了');
  });

  // 同一元素可以绑定多个监听器
  btn.addEventListener('mouseenter', () => console.log('鼠标移入'));

  // 键盘事件：e.key 是按下的键名
  inp.addEventListener('keydown', (e) => {
    console.log('按下了：' + e.key);
  });

  // 只触发一次的监听器
  btn.addEventListener('click', () => {
    console.log('这条只打印一次');
  }, { once: true });
</script>

🔗 相关词条input 浏览器 DOM JS 元素函数事件

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读