事件的分类

事件分为鼠标事件，键盘事件，表单事件以及移动端事件，今天主要介绍一下鼠标键盘以及表单事件

鼠标事件

• redDiv.onclick=function(){ console.log("onclick点击事件");}
• onmouseover,onmouseout会在鼠标从父级移入子集元素的时候触发
• onmouseenter，onmouseleave只有在移入移出父级和子集的整体的时候触发
• redDiv.onmouseover=function(){ console.log("onmouseover鼠标移入事件");}
• redDiv.onmouseout=function(){ console.log("onmouseout鼠标移出事件");}
• redDiv.onmouseenter=function(){ console.log("onmouseeneter鼠标移入事件");}
• redDiv.onmouseleave=function(){ console.log("onmouseleave鼠标移出事件");}
• redDiv.onmousedown=function(){ console.log("onmousedown鼠标按下事件");}
• redDiv.onmouseup=function(){ console.log("onmouseup鼠标抬起事件");}
• redDiv.ondblclick=function(){ console.log("ondblclick双击");}
• redDiv.oncontextmenu=function(){ console.log("oncontextmenu鼠标右键"); return false;}
• redDiv.onmousemove=function(){ console.log("onmousemove鼠标移动");}

键盘的事件

只有成为焦点的元素才能触发键盘事件

• document.getElementById("uname").onkeydown=function(){ console.log("键盘按下")}
• document.onkeyup=function(){ console.log("键盘抬起") }
• document.onkeypress=function(){ console.log("press键盘按下")}

表单事件

var first=document.getElementById("first");
var uname=document.getElementById("uname");

• uname.onblur=function(){ console.log("blur失去了焦点")}
• uname.onchange=function(){ console.log("change内容发生了变化")}
• uname.onfocus=function(){ console.log("获取焦点")}
• uname.oninput=function(){ console.log("输入")}
  输入框内容发生变化的时候，即时
• first.onsubmit=function(){ console.log("用户提交了表单");
  点击的是提交按钮，form表单触发onsubmit
• first.onreset=function(){ console.log("用户重置777777了表单"); return false;}

一些事件中系统会有默认事件触发，比如，右键的时候会弹出菜单，比如按了提交按钮会跳转网页，这些都是默认事件，默认事件可以被阻止：return false; return false;}