欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js 常用事件

程序员文章站 2022-12-23 15:54:08
js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件。 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式“激活”元素时触发 contextmenu 可以取消的事件,当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单 dblc ......

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。