我的位置:首页 > 前端>js 常用事件

js 常用事件

时间:2019-05-10 19:11:00 来源:互联网 作者: 神秘的大神 字体:

js 基础之常用事件

js当中,事件是较为常用的内容,本篇文章来说一些常用的事件。

鼠标事件

下面是常用的鼠标事件

  • click 当用户按下并释放鼠标按键或其他方式“激活”元素时触发
  • contextmenu 可以取消的事件,当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单
  • dblclick 当用户双击鼠标时触发
  • mousedown 当用户按下鼠标按键时触发
  • mouseup 当用户释放鼠标按键时触发
  • mousemove 当用户移动鼠标时触发
  • mouseover 当鼠标进入元素时触发。relatedTarget(在IE中是fromElement)指的是鼠标来自的元素
  • mouseout 当鼠标离开元素时触发。relatedTarget(在IE中是toElement)指的是鼠标要去往的元素
  • mouseenter 类似mouseover,但不冒泡。IE将其引入,HTML5将其标准化,但尚未广泛实现
  • mouseleave 类似mouseout,但不冒泡。IE将其引入,HTML5将其标准化,但尚未广泛实现

键盘事件

下面是常见的键盘事件,主要用来描述键盘行为:

  • keydown
  • keypress
  • keyup

加载事件

很多人说到加载事件,总是会想到window.onload,但是实际上,这类事件是一大类事件,下面是常见的加载事件:

  • load 页面完全加载后会触发该事件
  • error 当加载失败后触发,所有可以触发load事件的元素,都可以触发该事件
  • abort 元素加载中止时,(如加载过程中按下ESC键,停止加载),触发该事件,常用于图片加载 (只有IE支持)
  • unload 与load事件对应的是unload事件,该事件在文档被完全卸载后触发。刷新页面时,也会触发该事件。chrome/firefox/safari浏览器会阻止alert等对话框,IE浏览器会阻止console.log()等控制台显示。
window.onunload = function(e){
    //chrome报错,firefox静默失败,IE弹出666 alert(666); } // 或者 window.onunload = function(e){ //chrome和firefox控制台显示666,IE静默失败 console.log(666); }
  • DOMContentLoaded 则在形成完整的DOM树之后就会触发,而不理会图像、javascript文件、CSS文件或其他资源是否下载完毕。(IE8不支持)
window.addEventListener('DOMContentLoaded',function(e){ console.log(1); })

表单事件

下面是常用的表单事件

  • submit 表单提交时触发,绑定给form元素
  • reset 表单发生重置时触发,绑定为form元素
  • blur 失去焦点时触发
  • change 表单控制的内容发生改变时触发

其他事件

  • scroll 元素内部的内容滚动时触发
  • resize 窗口尺寸发生变化时触发

在后续的博文中会继续更新关于常用事件的具体使用。

如果想要具体了解js事件的更详细内容,可以关注https://developer.mozilla.org/zh-CN/docs/Web/Events。