React的事件大全

前端之家收集整理的这篇文章主要介绍了React的事件大全前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有以下几种事件类型 React事件的官方文档

中断类事件

定时触发的事件

复制类事件

组件类事件

键盘类事件

表单类事件

焦点类事件

鼠标类事件

选择器类事件

触摸类事件

插件类事件

轮事件

多媒体类事件

图片类事件

动画类事件

转换类事件

中断类事件-stoppropagation和preventdefault用于中断事件的传递

  • preventdefault 用于组织默认事件的执行,但是绑定在上面的其他事件可以正常执行。@H_403_40@

例如,

<a src="http://www.baidu.com" onClick="alert(1111)"></a>

baidu不会打开,但是会弹出对话框eventName.preventdefault()事件中断。

  • stoppropagation 中断冒泡事件向上的传递。@H_403_40@

定时触发的事件

  • setTimeout //定时触发@H_403_40@

复制类事件

  • onCopy //copy元素内容时触发@H_403_40@
  • onCut //内容剪切时触发@H_403_40@
  • onPaste //粘贴时触发@H_403_40@

组件类事件

  • onCompositionEnd@H_403_40@
  • onCompositionStart@H_403_40@
  • onCompositionUpdate@H_403_40@

键盘类事件

  • onKeyDown //按下键盘按键时触发@H_403_40@
  • onKeyPress //按下键盘按键并松开时触发@H_403_40@
  • onKeyUp //放开先前按下的 按键时触发@H_403_40@

表单类事件

  • onChange //内容改变时触发@H_403_40@
  • onInput //事件在用户输入时触发@H_403_40@
  • onSubmit //提交时触发@H_403_40@

焦点类事件

  • onFocus //获得焦点时触发@H_403_40@
  • onBlur //失去焦点时触发@H_403_40@

鼠标类事件

  • onClick@H_403_40@
  • onContextMenu@H_403_40@
  • onDoubleClick@H_403_40@
  • onDrag@H_403_40@
  • onDragEnd@H_403_40@
  • onDragEnter@H_403_40@
  • onDragExit@H_403_40@
  • onDragLeave@H_403_40@
  • onDragOver@H_403_40@
  • onDragStart@H_403_40@
  • onDrop@H_403_40@
  • onMouseDown@H_403_40@
  • onMouseEnter@H_403_40@
  • onMouseLeave@H_403_40@
  • onMouseMove@H_403_40@
  • onMouSEOut@H_403_40@
  • onMouSEOver@H_403_40@
  • onMouseUp@H_403_40@

选择器类事件

  • onSelect //事件会在文本框中的文本被选中时发生。@H_403_40@

触摸类事件

  • onTouchCancel //一般在一些高级事件发生时,触发取消touch事件。例如暂停游戏,存档等。@H_403_40@
  • onTouchEnd //移走手指时触发@H_403_40@
  • onTouchMove //移动手指时触发@H_403_40@
  • onTouchStart //按下手指时触发@H_403_40@

插件类事件

  • onScroll //元素滚动时执行 JavaScript@H_403_40@

轮事件

  • onWheel //事件在鼠标滚轮在元素上下滚动时触发。@H_403_40@

多媒体类事件

  • onAbort@H_403_40@
  • onCanPlay@H_403_40@
  • onCanPlayThrough@H_403_40@
  • onDurationChange@H_403_40@
  • onEmptied@H_403_40@
  • onEncrypted@H_403_40@
  • onEnded@H_403_40@
  • onError@H_403_40@
  • onLoadedData@H_403_40@
  • onLoadedMetadata@H_403_40@
  • onLoadStart@H_403_40@
  • onPause@H_403_40@
  • onPlay@H_403_40@
  • onPlaying@H_403_40@
  • onProgress@H_403_40@
  • onRateChange@H_403_40@
  • onSeeked@H_403_40@
  • onSeeking@H_403_40@
  • onStalled@H_403_40@
  • onSuspend@H_403_40@
  • onTimeUpdate@H_403_40@
  • onVolumeChange@H_403_40@
  • onWaiting@H_403_40@

图片类事件

  • onLoad //事件会在页面或图像加载完成后立即发生。@H_403_40@
  • onError //事件会在文档或图像加载过程中发生错误时被触发。@H_403_40@

动画类事件

  • onAnimationStart //动画开始时调用@H_403_40@
  • onAnimationEnd //动画结束时调用。但有点问题是连续播放时可能不会触发@H_403_40@
  • onAnimationIteration@H_403_40@

转换类事件

  • onTransitionEnd@H_403_40@

猜你在找的React相关文章