DOM鼠标事件和键盘事件


鼠标事件

事件类型

  • click:用户单击主鼠标按钮(一般是左键)或者按下在聚焦时按下回车键时触发

  • dblclick:用户双击主鼠标按键触发(频率取决于系统配置)

  • mousedown:用户按下鼠标任意按键时触发

  • mouseup:用户抬起鼠标任意按键时触发

  • mousemove:鼠标在元素上移动时触发

  • mouseover:鼠标进入元素时触发 会冒泡

  • mouseout:鼠标离开元素时触发 会冒泡

  • mouseenter:鼠标进入元素时触发,该事件不会冒泡

  • mouseleave:鼠标离开元素时触发,该事件不会冒泡

区别:

  • over和out,不考虑子元素,从父元素移动到子元素,对于父元素而言,仍然算作离开
  • enter和leave,考虑子元素,子元素仍然是父元素的一部分
  • mouseenter和mouseleave不会冒泡
  • bubbles -检测是否会冒泡

事件对象

所有的鼠标事件,事件处理程序中的事件对象,都为 MouseEvent

  • altKey:触发事件时,是否按下了键盘的alt键
  • ctrlKey:触发事件时,是否按下了键盘的ctrl键
  • shiftKey:触发事件时,是否按下了键盘的shift键
  • button:触发事件时,鼠标按键类型
    • 0:左键
    • 1:中键
    • 2:右键

位置:

  • page:pageX、pageY,当前鼠标距离页面的横纵坐标
  • client: clientX、clientY,鼠标相对于视口的坐标
  • offset:offsetX、offsetY,鼠标相对于事件源的内边距的坐标
  • screen: screenX、screenY,鼠标相对于屏幕
  • x、y,等同于clientX、clientY
  • movement:movementX、movementY,只在鼠标移动事件中有效,相对于上一次鼠标位置,偏移的距离

键盘事件

事件类型

  • keydown:按下键盘上任意键触发,如果按住不放,会重复触发此事件
  • keypress:按下键盘上一个字符键时触发 键盘按键被按下并释放一个键时发生
  • keyup:抬起键盘上任意键触发

KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符.
keydown、keypress 如果阻止了事件默认行为,文本不会显示。

事件对象

KeyboardEvent

  • code:得到按键字符串,适配键盘布局。
  • key:得到按键字符串,不适配键盘布局。能得到打印字符。
  • keyCode、which:得到键盘编码

文章作者: overwhat
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 overwhat !
评论
  目录