从零开始前端学习[45]:js中的所谓的事件类型，鼠标事件，表单事件，键盘事件以及系统事件

来源：互联网发布：初请失业金数据公布网编辑：程序博客网时间：2024/05/18 03:54

js中的所谓的事件类型

鼠标事件
表单事件
键盘事件
系统事件

提示：
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

鼠标事件

可以想象一下，我们平时在使用鼠标的时候都是有哪些操作的，单击？双击？移动？亦或者按下，抬起，移入，移出等等一系列的事件，下面就主要针对鼠标的事件进行一点点小测试

事件类型相关函数点击事件 onclick 移入/移出 onmouseover/onmouseout 移入/移出 onmouseenter/onmouseleave 双击事件 ondbclick 鼠标按下事件 onmousedown 鼠标弹起事件 onmousedown 鼠标移动事件 onmousemove 鼠标抬起事件 onmouseup

上面主要有两个需要注意的地方，一个就是ondbclick，是鼠标双击事件，还有鼠标的移入移出是有两个对称函数的，一个就onmouseenter/onmouseleave，另外一个就是onmouseover和onmouseout，他们的使用都是对称的。

代码如下所示：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }        .main{width: 700px;margin: 50px auto;box-shadow: 0 0 10px 0px blue;padding: 10px}        p{width: 150px;height: 150px;box-shadow: 0 0  10px 0px deeppink;text-align: center;line-height: 150px;margin: 10px}  </style></head><body>  <div class="main">    <p id="mouse_event_1">1</p>    <p id="mouse_event_2">2</p>    <p id="mouse_event_3">3</p>  </div><script>  var mouse_event_1 = document.getElementById("mouse_event_1");  var mouse_event_2 = document.getElementById("mouse_event_2");  var mouse_event_3 = document.getElementById("mouse_event_3");  mouse_event_1.onclick = function () {      mouse_event_1.innerHTML = "onclick Event";  }//  mouse_event_1.onmouseover = function () {//      mouse_event_1.innerHTML = "onmouseover";//  }//  mouse_event_1.onmouseout = function () {//      mouse_event_1.innerHTML = "onmouseout";//  }  mouse_event_1.onmouseleave = function () {      mouse_event_1.innerHTML = "onmouseleave";  }  mouse_event_1.onmouseenter = function () {      mouse_event_1.innerHTML = "onmouseenter";  }  mouse_event_2.onmousedown = function () {      mouse_event_2.innerHTML = "onmousedown"  }  mouse_event_2.onmouseup = function () {      mouse_event_2.innerHTML = "onmouseup"  }  mouse_event_3.ondblclick = function () {      mouse_event_3.innerHTML = "ondbclick"  }</script></body></html>

这里写图片描述

表单事件

之前我们学了很多表单相关的东西，input等标签，那这个表单事件是什么？？也就是对这些表单元素提交相关操作的时候，所需要的一些事件信息，那这些表单事件有哪些分类呢？？？
如下所示:

元素失去焦点事件
元素获得焦点事件
当用户改变表单内容的事件
重置按钮被点击之后的事件
提交按钮被点击之后的事件

如下表所示:

事件类型相关函数元素失去焦点 onblur 元素获得焦点 onfocus 用户改变表单的内容 onchange 用户点击重置按钮 onreset 提交按钮被点击 onsubmit

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 800px;margin: 40px auto;box-shadow: 0 0 10px 0 deeppink}    form{margin: auto}    p{height: 50px;text-align: center;}    .main #text{width: 300px;height: 40px}    .main #btn_submit{width: 50px;height: 40px}    .main #btn_reset{width: 50px;height: 40px}  </style></head><script>    function myFunction(){        var x = document.getElementById("text");        x.value=x.value.toUpperCase();    }</script><body>  <div class="main">    <form action="">      <p id="output">output</p>      <input id="text" type="text" onchange="myFunction()">      <input id="btn_submit" type="submit">      <input id="btn_reset" type="reset">    </form>  </div>  <script>    var text = document.getElementById("text");    var btn_submit = document.getElementById("btn_submit");    var btn_reset = document.getElementById("btn_reset");    var output = document.getElementById("output");    text.onblur = function () {        output.innerHTML = "onblur"    }    text.onfocus = function () {        output.innerHTML = "onfocus";    }    text.onchange = function () {        output.innerHTML = "onchange";    }    btn_submit.onclick = function () {        console.log("onsubmit");    }    btn_reset.onreset = function () {        console.log("onreset");    }  </script></body></html>

注意以上，如果测试onchange的时候，需要将其他的都给注释掉，只留下onchange对应的表单相关的信息，因为会造成冲突
还有就是表单的onreset和onsubmit，因为表单提交或者重置后浏览器会清除掉相关信息，这个时候也不会有打印，一般这两个事件并不会经常使用到，因为他们都可以使用onclick来进行代替

键盘事件

键盘事件，顾名思义，也就是跟键盘相关的一些事件
主要有以下几个分类:

事件类型相关函数 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或者按住 onkeyup 某个键盘的键被松开

键盘事件可能使用的不太多，暂时不赘述

系统事件

对于系统事件，主要是有以下几个分类

事件类型相关函数 onload 某个页面或图像被完成加载，整个html页面，只允许有一次onload的过程 onresize 窗口或框架被调整尺寸的时候 onselect 文本被选中的时候的事件 onerror 当加载文档或图像时发生某个错误，这个就是文档加载路径出现了问题的时候

关于以上几个系统事件，其实使用都是比较简单的，这个可以结合css里面的resize等属性来进行联合使用监听。在这里也不赘述。

阅读全文

1 0