JS-事件_html js document.getelementsbyname("outtime").valu-CSDN博客

本文链接：https://blog.csdn.net/qq_56022173/article/details/125516902

事件
js中注册监听的方式：
js中事件的种类：
JS事件对象 event中的属性和功能
事件
概念：

事件：一件事
事件源：事件发生的组件
监听器：一个对象，当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生
js中注册监听的方式：
在定义标签时，添加事件名称属性。属性值是js代码
js代码会被自动封装到一个function函数的方法体中
例子：<div id="div_id" οnclick="fun();">hehe</div>

通过js获取元素对象，再添加事件
例子：
               //1.获取元素对象
               var input = document.getElementById("username");
               //2.注册监听
               input.onclick = function(){
                   //alert("hehe");
               }

通过 addEventListener() 方法来添加事件

语法：document.getElementById(“myBtn”).addEventListener(“click”,事件处理函数);
//移除事件
值1：事件名
值2：事件处理函数
document.getElementById(“myBtn”).removeEventListener(‘click’,show);

js中事件的种类：
焦点事件：针对表单

onfocus 元素获得焦点
onblur 元素失去焦点
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>

</head>
   <body>
       
       <center>
           <form action="#" method="get" οnsubmit="return checkAll()">
               用户名：<input type="text" name="username" value="" placeholder="请输入用户名6-16字母" οninput="checkUsername()" />
               <span id="usp"></span>
               <br>
               密码： <input type="password" name="password" id="" value="" placeholder="请输入密码6-16数字"
                   οnblur="checkPassword()" /><span id="psp"></span><br>
               <input type="submit" value="提交" />
               <input type="reset" name="" id="" value="重置" />
           </form>

</center>

<script type="text/javascript">
       //校验所有表单项
       function checkAll(){

           return checkUsername()&&checkPassword();
       }

           //校验用户名
           function checkUsername() {
               //获取用户输入的内容
               var username = document.getElementsByName("username")[0].value;
               //alert(username);
               var regx = /^[a-z]{6,16}$/i;
               var flag = regx.test(username);
               var usp = document.getElementById("usp");

               if (flag) {
                   //alert("规则正确")
                   usp.innerHTML = "<b style='color:green;'>✔用户名规则正确</b>"
               } else {
                   //alert("规则错误")
                   usp.innerHTML = "<b style='color:red;'>✘用户名规则错误</b>"
               }

               return flag;
           }

           //校验密码
           function checkPassword() {
               //获取用户输入的内容
               var pwd = document.getElementsByName("password")[0].value;

               var regx = /^[1-9][0-9]{5,15}$/;
               var flag = regx.test(pwd);
               var psp = document.getElementById("psp");

               if (flag) {
                   //alert("规则正确")
                   psp.innerHTML = "<b style='color:green;'>✔密码规则正确</b>"
               } else {
                   //alert("规则错误")
                   psp.innerHTML = "<b style='color:red;'>✘密码规则错误</b>"
               }

               return flag;

           }
       </script>
   </body>
</html>