什么是事件

首先，我们需要了解什么是事件，事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

事件的注册

其次，我们还需要了解事件的注册，事件的注册可以理解为告诉浏览器当事件响应后要执行哪些操作代码。

事件的注册有静态注册和动态注册。

1.静态注册

静态注册是通过html标签的事件属性直接赋予事件响应后的代码。

2.动态注册

动态注册指通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码。

动态注册的基本步骤：

①获取标签对象

②标签对象.事件名=function(){}

具体事件

onload

onload为加载完成事件，页面加载完成之后，常用于做页面js代码初始化操作；

<script type="text/javascript">
        //onload事件方法
        function onloadfun(){
            alert("静态注册onload事件，所有代码")
        }

        //onload事件动态注册。是固定写法
        window.onload=function (){
            alert("动态注册的onload事件");
        }
    </script>

onclick

onclick为单击事件，常用于按钮的点击响应事件操作；

<script type="text/javascript">
        function onclickFun(){
            alert("静态注册onclick事件");
        }

        //动态注册onclick事件
        window.onload=function (){
            //1.获取标签对象
           var btnObj= document.getElementById("btn01")
           // alert(btnObj);
            /*
            document 是javaScript语言提供的一个对象(文档)
            getElementById是通过id属性获得标签对象
             */
            //2.通过标签对象.事件名=function(){}
            btnObj.onclick=function (){
                alert("动态注册的onclick事件")
            }

        }
    </script>

onblur

onblur为失去焦点事件，常用于输入框失去焦点后验证其输入的内容是否合法；

 <script>
            //静态注册失去焦点事件
            function onblurFun(){
                //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
                //log()是打印的方法
                console.log("静态注册失去焦点事件");
            }

            //动态注册onblur事件
            window.onload=function (){
                //1.获取标签对象
               var passwordObj= document.getElementById("password");
               alert(passwordObj)
                //2.通过标签对象，事件名=function(){};
                passwordObj.onblur=function(){
                    console.log("动态注册失去焦点事件");
                }
            }


    </script>

onchange

onchange为内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作

<script type="text/javascript">
        function onchangeFun(){
            alert("女神已经改变了");
        }

        window.onload=function (){
            //1.获取标签对象
            var selobj=document.getElementById("sel01");
            alert(selobj);
            //2.通过标签对象.事件名=function(){}
            selobj.onchange=function (){
                alert("男神已经改变了");
            }
        }
    </script>

onsubmit

onsubmit为表单提交事件，常用于表单提交前，验证所有表单项是否合法

 <script type="text/javascript">
        //静态注册表单提交事务
        function onsubmitFun(){
            //要验证所有表单项是否合法，如果有一个不合法，阻止表单提交
            alert("静态注册表单提交事件---发现不合法");
            return false;
        }

        window.onload=function (){
            //1.获取标签对象
            var formObj=document.getElementById("form01");
            alert(formObj);
            //2.通过标签对象，事件名=function(){}
            formObj.onsubmit=function (){
                alert("动态注册表单提交事件---发现不合法");
                return false;
            }
        }
    </script>

js事件|青训营笔记