事件的分类

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

鼠标事件

  • 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;}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容