事件对象

事件对象在事件触发时自动传入处理函数，包含事件的全部信息。

获取事件对象

JavaScript

element.addEventListener('click', function(e) {
  console.log(e);  // 事件对象
});

常用属性

元素相关

属性	说明
target	触发事件的元素（实际点击的）
currentTarget	绑定事件的元素
srcElement	target的别名（IE）

JavaScript

document.querySelector('ul').addEventListener('click', (e) => {
  console.log(e.target);         // 点击的li
  console.log(e.currentTarget);  // ul
});

鼠标事件属性

属性	说明
clientX / clientY	相对于视口的坐标
pageX / pageY	相对于文档的坐标
offsetX / offsetY	相对于目标元素的坐标
screenX / screenY	相对于屏幕的坐标
button	按下的鼠标按键（0左/1中/2右）

JavaScript

element.addEventListener('click', (e) => {
  console.log(e.clientX, e.clientY);  // 鼠标位置
});

键盘事件属性

属性	说明
key	按键值（'a', 'Enter', 'Shift'）
code	物理按键码（'KeyA', 'Enter', 'ShiftLeft'）
keyCode	按键ASCII码（已废弃）
ctrlKey / shiftKey / altKey	是否按下修饰键

JavaScript

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('回车键');
  }
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();  // 阻止浏览器保存
  }
});

通用属性

属性	说明
type	事件类型
timeStamp	事件触发时间戳
bubbles	是否冒泡
cancelable	是否可取消默认行为

常用方法

preventDefault

阻止默认行为：

JavaScript

form.addEventListener('submit', (e) => {
  e.preventDefault();  // 阻止表单提交
});

link.addEventListener('click', (e) => {
  e.preventDefault();  // 阻止链接跳转
});

stopPropagation

阻止事件冒泡：

JavaScript

child.addEventListener('click', (e) => {
  e.stopPropagation();  // 阻止事件向上冒泡
});

stopImmediatePropagation

阻止后续所有监听器：

JavaScript

btn.addEventListener('click', (e) => {
  e.stopImmediatePropagation();
});
btn.addEventListener('click', () => {
  // 不会被触发
});

注意：preventDefault 阻止默认行为，stopPropagation 阻止冒泡，两者作用不同。

要点总结

target 是实际触发元素，currentTarget 是绑定元素
鼠标坐标根据需求选择 client/page/offset 系列
键盘事件用 key 和 code，keyCode 已废弃
preventDefault 阻止默认行为，stopPropagation 阻止冒泡
事件对象只在事件处理函数中有效