从零开始前端学习[45]:js中的所谓的事件类型，鼠标事件，表单事件，键盘事件以及系统事件_能够用js代码动态控制样式,并添加鼠标、键盘和表单事件;提升网页的交互性。(-CSDN博客

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等属性来进行联合使用监听。在这里也不赘述。