JS中的鼠标事件和键盘事件基础

鼠标事件和键盘事件在一些自定义组件时会得到使用，其实触发频率很高，但是往往被忽略

一、鼠标事件

// 鼠标事件 click => 单击; dblclick => 双击; mousedown => 鼠标按下; mousemove => 鼠标移动
const clickHandler = (event) => {
  // 鼠标事件对象
  const eventObj = {
    type: event.type, // 事件类型
    target: event.target, // 事件目标, 点击的元素，一般是深层元素，再冒泡外传
    // 鼠标相对于元素的位置，最近的一个定位祖先元素；如position: "relative"
    offsetX: event.offsetX, 
    offsetY: event.offsetY,
    clientX: event.clientX, // 鼠标相对于浏览器窗口的位置，根页面
    clientY: event.clientY,
    screenX: event.screenX, // 鼠标相对于屏幕的位置(可以把浏览器缩小测试)
    screenY: event.screenY,
    x: event.x, // x 等同于 clientX
    y: event.y
  };
  console.log("click", event);
};
const mousemoveHandler = () => {
  console.log("mousemove");
};
const mousedownHandler = () => {
  console.log("mousedown");
};
// 双击事件 注意点击一定会触发，条件合适的同时才会触发双击，而且双击事件会在单击事件之后触发
const dblclickHandler = () => {
  console.log("dblclick");
};
window.addEventListener("click", clickHandler);
window.addEventListener("dblclick", dblclickHandler);
window.addEventListener("mousedown", mousedownHandler);
window.addEventListener("mousemove", mousemoveHandler);

// 注意页面销毁时清除监听器；注意销毁的时候传入同一个函数（函数是有内存地址的，相当于变量）
// window.removeEventListener("click", clickHandler);

二、键盘事件

// eventObj 键盘事件对象
const KeyboardEventObj = {
  ctrlKey: true, // 是否按下了 ctrl 键
  altKey: true, // 是否按下了 alt 键
  shiftKey: true, // 是否按下了 shift 键
  metaKey: true, // 是否按下了 meta 键
  keyCode: 65, // 按下的键的编码, 数字
  code: "KeyA", // 按下的键的字符的名字，内部定义的
  key: "a", // 区分大小写，实际输出到字符
  repeat: false, // 是否重复按下, keypress中会持续触发
  bubbles: true // 是否冒泡,冒泡导致的事件
};

// 键盘事件 keydown => 按下键盘; keypress => 按下键盘，keyup => 松开键盘
const keydownHandler = (e) => {
  // key 键盘按键的字符，code 键盘按键的编码
  console.log(e.key, e);
};
// 鼠标按住，会不断触发
const keypressHandler = (e) => {
  console.log(e.key, e);
};
const keyupHandler = (e) => {
  console.log(e.key, e);
};
window.addEventListener("keydown", keydownHandler);
window.addEventListener("keypress", keypressHandler);
window.addEventListener("keyup", keyupHandler);

// 注意页面销毁时清除监听器
// window.removeEventListener("keydown", keydownHandler);