前端Wiki/JavaScript/进阶/事件

事件对象 event

监听函数的第一个参数是事件对象 e，它携带了这次事件的全部信息，常用属性方法有：e.target（真正触发事件的元素）、e.currentTarget（绑定监听器的元素）、e.key（按键名）、e.clientX/clientY（鼠标坐标）。

两个必须会的方法：e.preventDefault() 阻止浏览器默认行为——最经典的是拦截表单 submit，避免页面刷新跳转；e.stopPropagation() 阻止事件继续冒泡（下一节细讲）。

区分 target 和 currentTarget：点击按钮时，如果监听器绑在按钮的父元素上，e.target 是按钮本身，e.currentTarget 是父元素。事件委托正是利用 target 找到真正被点的元素。

本节要点e.target 是真正被点的元素；preventDefault 拦截默认行为（如表单刷新）；stopPropagation 阻止冒泡；target 与 currentTarget 在委托时含义不同。

HTML

<input id="inp" placeholder="输入文字试试">
<form id="form">
  <button type="submit">提交（会被拦截）</button>
</form>
<script>
  const inp = document.getElementById('inp');

  // input 事件：每次输入都触发
  inp.addEventListener('input', (e) => {
    console.log('当前值：' + e.target.value); // target 是输入框
  });

  // 拦截表单默认提交（否则页面会刷新）
  document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('默认提交被拦截，拿到值自己处理：', inp.value);
  });

  // 鼠标坐标
  document.addEventListener('click', (e) => {
    console.log('点击位置：', e.clientX, e.clientY);
  });
</script>

🔗 相关词条事件委托浏览器元素函数事件

📚 推荐阅读

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

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

IndexedDB API 3.0万象云档

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

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

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