2022.4.14 js事件与表单操作

6.js 中的事件

什么是事件？

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件：常用于按钮的点击响应操作。
onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

什么是事件的注册（绑定）：

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

事件的注册又分为静态注册和动态注册两种：

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。

动态注册基本步骤：

1、获取标签对象
2、标签对象.事件名 = fucntion(){}

onload 加载完成事件

静态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          // onload 事件的方法
 8          function onloadFun() {
 9              alert('静态注册 onload 事件，所有代码');
10          }
11      </script>
12  </head>
13  <!--静态注册 onload 事件
14      onload 事件是浏览器解析完页面之后就会自动触发的事件
15  -->
16  
17  <!--调用方法-->
18  <body onload="onloadFun();">
19  
20  </body>
21  </html>

动态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          //window.onload 文档(这个html文档)加载完成后执行
 8          // onload 事件动态注册是固定写法
 9          window.onload = function () {
10              alert("动态注册的 onload 事件");
11          }
12      </script>
13  </head>
14  
15  <body>
16  
17  </body>
18  </html>

onclick 单击事件

静态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          function onclickFun() {
 8              alert("静态注册 onclick 事件");
 9          }
10      </script>
11  </head>
12  <body>
13  <!--静态注册 onClick 事件-->
14  <button onclick="onclickFun();">按钮 1</button>
15  </body>
16  </html>

动态：

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          // 动态注册 onclick 事件
 8          window.onload = function () {
 9              // 1 获取标签对象
10              /*
11              * document 是 JavaScript 语言提供的一个对象（文档：相当于整个这个html）<br/>
12              * Element 元素（就是标签）
13              * getElementById 通过 id 属性获取标签对象
14              **/ 
15              var btnObj = document.getElementById("btn01");//得到这个button对象
16              
17              // 2 通过标签对象.事件名 = function(){}
18              btnObj.onclick = function () {
19                  alert("动态注册的 onclick 事件");
20              }
21          }
22      </script>
23  </head>
24  <body>
25  <!--动态注册 onClick 事件-->
26  <button id="btn01">按钮 2</button>
27  </body>
28  </html>

onblur 失去焦点事件

静态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          // 静态注册失去焦点事件
 8          function onblurFun() {
 9              console.log("静态注册失去焦点事件");
10          }
11      </script>
12  </head>
13  <body>
14  用户名:<input type="text" onblur="onblurFun();"><br/>
15  密码:<input id="password" type="text" ><br/>
16  </body>
17  </html>

动态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          // 动态注册 onblur 事件
 8          window.onload = function () {
 9              //1 获取标签对象
10              var passwordObj = document.getElementById("password");//获取密码输入框对象
11  
12              //2 通过标签对象.事件名 = function(){};
13              passwordObj.onblur = function () {
14                  console.log("动态注册失去焦点事件");
15              }
16          }
17      </script>
18  </head>
19  <body>
20  用户名:<input type="text"><br/>
21  密码:<input id="password" type="text" ><br/>
22  </body>
23  </html>

onchange 内容发生改变事件

静态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7          function onchangeFun() {
 8              alert("女神已经改变了");
 9          }
10      </script>
11  </head>
12  <body>
13  请选择你心中的女神：
14  <!--静态注册 onchange 事件-->
15  <select onchange="onchangeFun();">
16      <option>--女神--</option>
17      <option>芳芳</option>
18      <option>佳佳</option>
19      <option>娘娘</option>
20  </select>
21  </body>
22  </html>

动态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript">
 7  
 8          window.onload = function () {
 9              //1 获取标签对象
10              var selObj = document.getElementById("sel01");
11  
12              //2 通过标签对象.事件名 = function(){}
13              selObj.onchange = function () {
14                  alert("男神已经改变了");
15              }
16          }
17      </script>
18  </head>
19  <body>
20  
21  请选择你心中的男神：
22  <select id="sel01">
23      <option>--男神--</option>
24      <option>国哥</option>
25      <option>华仔</option>
26      <option>富城</option>
27  </select>
28  </body>
29  </html>

onsubmit 表单提交事件

静态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript" >
 7          
 8          // 静态注册表单提交事务
 9          function onsubmitFun(){
10              // 一般在这里验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
11              alert("静态注册表单提交事件----发现不合法");
12              return flase;
13          }
14      </script>
15  </head>
16  <body>
17  <!--return false 可以阻止 表单提交    看onsubmitFun()的返回值-->
18  <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
19      <input type="submit" value="静态注册"/>
20  </form>
21  </body>
22  </html>

动态：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Title</title>
 6      <script type="text/javascript" >
 7  
 8          window.onload = function () {
 9              //1 获取标签对象
10              var formObj = document.getElementById("form01");
11  
12              //2 通过标签对象.事件名 = function(){}
13              formObj.onsubmit = function () {
14                  // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
15                  alert("动态注册表单提交事件----发现不合法");
16                  return false;
17              }
18          }
19      </script>
20  </head>
21  <body>
22  <form action="http://localhost:8080" id="form01">
23      <input type="submit" value="动态注册"/>
24  </form>
25  </body>
26  </html>

7. 提交表单

只有设置了name 属性的表单元素才能在提交表单时传递它们的值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form action="post">
 9     <p>
10         <span>用户名: </span> <input type="text" id="username">
11     </p>
12     <p>
13         <span>密码: </span> <input type="password" id= "password">
14     </p>
15     <!--绑定事件 onclick被点击时执行-->
16     <button type= "button" onclick="aaa()">提交</button>
17 </form>
18 <script>
19     function aaa() {
20         var uname = document.getElementById('username');
21         var pwd = document.getElementById('password');
22 
23         console.log(uname.value);//获取用户名
24         console.log(pwd.value);//获取密码
25     }
26 </script>
27 
28 </body>
29 </html>
30

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     
 9 <form action="#" method="post">
10     <p>
11         <span>用户名: </span> <input type="text" id="username" name="username">
12     </p>
13     <p>
14         <span>密码: </span> <input type="password" id= "password" name="password">
15     </p>
16     <!--绑定事件 onclick被点击时执行-->
17     <button type= "submit" onclick="aaa()">提交</button>
18 </form>
19 <script>
20     function aaa() {
21         var uname = document.getElementById('username');
22         var pwd = document.getElementById('password');
23     }
24 </script>
25 
26 </body>
27 </html>

输入用户名密码提交后看

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 <!--    MD5工具类-->
 7     <script src= "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
 8 
 9 </head>
10 <body>
11 <form action="#" method="post">
12     <p>
13         <span>用户名: </span> <input type="text" id="username" name="username">
14     </p>
15     <p>
16         <span>密码: </span> <input type="password" id= "password" name="password">
17     </p>
18     <!--绑定事件 onclick被点击时执行-->
19     <button type= "submit" onclick="aaa()">提交</button>
20 </form>
21 <script>
22     function aaa() {
23         var uname = document.getElementById('username');
24         var pwd = document.getElementById('password');
25         
26         //MD5算法
27         pwd.value = md5(pwd.value);//加密密码
28     }
29 </script>
30 
31 </body>
32 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!-- MD5工具类-->
 7     <script src= "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
 8 </head>
 9 <body>
10 <!--
11 表单绑定提交事件
12 onsubmit=绑定一个提交检测的函数,true、false
13 将这个结果返回给表单,使用onsubmit 接收
14 onsubmit 事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。
15 -->
16 
17 <form action= "https://www.baidu.com/" method="post" onsubmit= "return aaa()">
18     <P>
19         <span>用户名: </span> <input type="text" id="username" name= "username">
20     </p>
21     <p>
22         <span>密码: </span> <input type=" password" id="input-password">
23     </p>
24     <input type= "hidden" id="md5-password" name="hidden-password">
25 
26 <button type="submit">提交</button>
27 </form>
28 
29 <script>
30     function aaa() {
31         var uname = document.getElementById('username');
32         var pwd = document.getElementById('input-password');
33         var md5pwd = document.getElementById('md5-password');
34 
35         //将经过MD5加密的密码放到隐藏域
36         md5pwd.value = md5(pwd.value);
37 
38         //可以校验判断表单内容，true就是通过提交，false阻止提交
39         return true;
40     }
41 
42 </script>
43 
44 </body>
45 </html>

posted @ 2022-04-17 15:10 暴躁C语言阅读(36) 评论(0) 收藏举报

刷新页面返回顶部

暴躁C语言