跳到主要内容

常用事件类型

文档​

键盘事件​

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。

  • keydown：按下键盘时触发。
  • keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
  • keyup：松开键盘时触发该事件。

如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。

keydown
keypress
keydown
keypress
...（重复以上过程）
keyup

鼠标与滚轮事件​

  • click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。
  • dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
  • mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
  • mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
  • mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
  • mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
  • mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
  • mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
  • mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

触发顺序： mouseDown > mouseup > click > dblclick

  • screenX，设置鼠标相对于屏幕的水平坐标（但不会移动鼠标），默认为0，等同于MouseEvent.screenX属性。

  • screenY，设置鼠标相对于屏幕的垂直坐标，默认为0，等同于MouseEvent.screenY属性。

  • clientX，设置鼠标相对于窗口的水平坐标，默认为0，等同于MouseEvent.clientX属性。

  • clientY，设置鼠标相对于窗口的垂直坐标，默认为0，等同于MouseEvent.clientY属性。

  • event.pageX 是目标点距离document最左上角的X轴坐标

  • event.pageY 是目标点距离document最左上角的Y轴坐标

触摸与手势事件​

  • touchstart 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
  • touchmove 当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。
  • touchend 当手指从屏幕上移开时触发。
  • touchcancel 当系统停止跟踪触摸时触发。

每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey。

  • gesturestart 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
  • gesturechange 当触摸屏幕的任何一个手指的位置发生变化时触发。
  • gestureend 当任何一个手指从屏幕上面移开时触发。

每个手势事件的event对象都包含着标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

进度事件 （继承ProgressEvent接口）​

  • abort 外部资源中止加载时（比如用户取消）触发，发生错误导致中止不会触发。
  • error 由于错误导致外部资源无法加载时触发（error特性，不会冒泡，不会触发父元素的error时间监听函数）
  • load 外部资源加载成功时触发
  • loadstart 外部资源开始加载时触发
  • loadend 外部资源停止加载时触发，发生顺序在error、abort、load等事件的后面。
  • progress 外部资源加载过程中不断触发
  • timeout 加载超时时触发

拖拉事件 （继承DragEvent接口）​

  • drag 在拖拽节点上持续触发（间隔几百毫秒）
  • dragstart 开始拖拉时，在被拖拉的节点上触发
  • dragend 拖拉结束时，在被拖拉的节点上触发
  • dragenter 拖拉进入当前节点时，在当前节点上触发一次
  • dragover 拖拉进入当前节点时，在当前节点上持续触发（间隔几百毫秒）
  • dragleave 拖拉离开当前节点范围内，在当前节点上触发
  • drop 释放目标节点时，在目标节点上触发。

页面相关事件 描述​

  • onAbort 图片在下载时被用户中断
  • onBeforeUnload 当前页面的内容将要被改变时触发的事件
  • onError 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
  • onLoad 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
  • onMove 浏览器的窗口被移动时触发的事件
  • onResize 当浏览器的窗口大小被改变时触发的事件
  • onScroll 浏览器的滚动条位置发生变化时触发的事件
  • onStop 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
  • onUnload 当前页面将被改变时触发的事件

表单相关事件 描述​

  • onBlur 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
  • onChange 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
  • onFocus 当某个元素获得焦点时触发的事件
  • onReset 当表单中RESET的属性被激发时触发的事件
  • onSubmit 一个表单被递交时触发的事件