JavaScript基础之常用事件

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。