事件分类

事件分为三大类：鼠标事件、按键事件、HTML事件

鼠标事件：

click：鼠标单击时触发

box.onclick=function(){

console.log('我被单击了')}

dblclick:双击时触发

box.onclick=function(){console.log('我被双击了')}

mousedown:鼠标按下时触发

onmousedown = function() { console.log('按下鼠标'); };

mousemove：鼠标移动时触发

onmousemove = function() { console.log('移动鼠标'); };

mouseup：鼠标弹起时触发

onmouseup = function() { console.log('松开鼠标'); };

mouseover：当鼠标移入某个元素的那一刻触发。

onmouseover = function() { console.log('我移入了鼠标'); };

mouseout：当鼠标移出某个元素的那一刻触发

onmouseover = function() { console.log('我移出了鼠标'); };

mouseenter：当鼠标移入某个元素的那一刻触发。

onmouseenter = function() { console.log('鼠标移入了'); };

mouseleave：当鼠标移出某个元素的那一刻触发。

onmouseleave = function() { console.log('鼠标移出了'); };

//注意：mouseenter和mouseleave不会触发冒泡事件！！！

键盘事件

keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。

onkeydown=function(){

console.log('我被按下了')}

keyup：当用户按下键盘上某个键触发，如果按住不放，会重复触发。

onkeydown=function(){

console.log('我被松开了')}

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

onkeypress=function(){

console.log('按下了键盘上的字符键')}

HTML事件

load：当页面完全加载后执行

document.onload=function(){

console.log('页面加载完毕')}

unload：当页面完全卸载后执行

document.onunload=function(){

console.log('页面加载完毕')}

select：当用户选择文本框(input 或 textarea)中的内容触发。

input.onselect=function(){

console.log('选择了文本内容')}

change：当文本框(input 或 textarea)内容改变且失去焦点后触发。

input.onchange=function(){console.log('改变了文本内容')}

focus：当页面或者元素获得焦点时触发

input.onfocus=function(){console.log('文本框被选中')}

blur： 当页面或者元素失去焦点时触发

input.onfocus=function(){

console.log('文本框被选中')}

submit：当用户点击提交按钮在<form>元素节点上触发

form.onsubmit=function(){console.log('提交表单')}

reset：当用户点击重置按钮在<form>元素节点上触发

form.onreset=function(){console.log('重置表单')}

scroll：当用户滚动带滚动条的元素时触发

form.onscroll=function(){console.log('滚动')}