欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Web 前端学习之 JS中的事件

程序员文章站 2024-02-29 21:52:28
...

Web 前端学习之 JS中的事件

1.前言

什么是事件?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
比如我们经常在访问页面时候点击按钮,比如下图我们想搜索东西的时候需要点击 ,百度一下,这就是一个点击事件
Web 前端学习之 JS中的事件

2.常用的事件

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

下面我会一个个举例介绍这些常用事件的用法

3.事件的注册

什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

静态注册

通过html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
静态注册的方式如下 以按钮点击事件为例

<body>
	<script>
        function onclickFun() {
            alert("静态注册onclick事件");
        }
    </script>
    <!--静态注册onClick事件-->
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button>
</body>

动态注册

是指先通过js 代码得到标签的dom 对象,然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码,叫动态注册。
动态注册基本步骤:

  1. 获取标签对象
  2. 标签对象.事件名= fucntion(){}
<body>
	<script>
		window.onload = function () {
	            var btnObj = document.getElementById("btn01");
	            btnObj.onclick = function () {
	                alert("动态注册的onclick事件");
	            }
	        }
	</script>
	<button id="btn01">按钮2</button>
</body>

1.onload事件

页面加载完成之后,常用于做页面js 代码初始化操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件,所有代码');
        }

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

    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
       <body οnlοad="onloadFun();">
-->
<body>

</body>
</html>

2.onload事件

常用于按钮的点击响应操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");
        }

        // 动态注册onclick事件
        window.onload = function () {
            // 1 获取标签对象
            /*
            * document 是JavaScript语言提供的一个对象(文档)<br/>
            * get           获取
            * Element       元素(就是标签)
            * By            通过。。   由。。经。。。
            * Id            id属性
            *
            * getElementById通过id属性获取标签对象
            **/
            var btnObj = document.getElementById("btn01");
            // alert( btnObj );
            // 2 通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }

    </script>
</head>
<body>
    <!--静态注册onClick事件-->
    <button οnclick="function{ alert("静态注册onclick事件");}">按钮1</button>
    <button id="btn01">按钮2</button>
</body>
</html>

3.onblur 事件

常用用于输入框失去焦点后验证其输入内容是否合法。

这里的失去焦点是什么意思呢
就以百度搜索来举例,当我们想输入内容时, 光标会在搜索栏闪烁,这个时候我们的焦点在搜索栏,也就是一个input标签上
Web 前端学习之 JS中的事件
当我们的鼠标点击了其他地方时,可以看到光标不再闪烁,而搜索栏变灰,这个时候这个input标签就失去焦点了,我们可以对此做出一些操作, 比如使其变灰
Web 前端学习之 JS中的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 静态注册失去焦点事件
        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>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>
</html>

4.onchange事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <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>
</head>
<body>
    请选择你心中的女神:
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--女神--</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>

    请选择你心中的男神:
    <select id="sel01">
        <option>--男神--</option>
        <option>国哥</option>
        <option>华仔</option>
        <option>富城</option>
    </select>


</body>
</html>

5.onsubmit 事件

常用于表单提交前,验证所有表单项是否合法。

之前已经介绍过表单了, 在我们点击登录按钮的时候, 表单会向相应的页面 通过 get 或者 post的方式提交内容 ,但是如果表单内部有不合法的信息,比如用户名已存在啊等等限制条件,我们就应该拒绝提交

这个时候就要用到onsubmit事件,而拒绝提交的办法就是使得onsubmit="return false",我们可以在自己写的函数里面进行判断,如果遇到不合法信息,就return fasle ,所以标签里面的信息就可以写成这样onsubmit="return ourfunc();"

以上举例用的是静态注册的方法,不过我觉得是动态注册看起来比较清晰,便于维护

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
            // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
            alert("静态注册表单提交事件----发现不合法");

            return flase;
        }

        window.onload = function () {
            //1 获取标签对象
            var formObj = document.getElementById("form01");
            //2 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
                // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
                alert("动态注册表单提交事件----发现不合法");

                return false;
            }
        }

    </script>
</head>
<body>
    <!--return false 可以阻止 表单提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>

</body>
</html>