Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件

最新推荐文章于 2023-10-11 11:04:33 发布

种下一颗草莓

最新推荐文章于 2023-10-11 11:04:33 发布

阅读量4.2k

点赞数 1

分类专栏： JavaWeb 文章标签： javascript js java css vue

本文链接：https://blog.csdn.net/HangHug_L/article/details/112685504

版权

JavaWeb 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

js中的事件

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

常用的事件：

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

onclick 单击事件：常用于按钮的点击响应操作。

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

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

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

事件的注册：

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

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

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

动态注册基本步骤：

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

和onload加载完成事件结合起来，有了onload动态注册才实现了后续其它事件的动态注册。

动态注册事件可以做到当页面加载完成后再执行script中的代码。

静态注册事件遵循从上到下依次执行，可能会出错。

1.onload加载完成事件

onload事件是浏览器解析完页面之后就会自动触发的事件。

1.1静态注册

onlaod属性必须写在body标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
    <script type="text/javascript">
        function onloadFun() {
            alert('静态注册 onload 事件，所有代码');
        }
    </script>
</head>
<body onload="onloadFun()">

</body>
</html>

其实这里面function函数只有一句alert函数，是可以直接写的，就不用再写function函数了，区别看第7行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
</head>
<body onload="alert('静态注册 onload 事件，所有代码!')">

</body>
</html>

1.2动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
    <script type="text/javascript">
        window.onload=function (){//固定格式
            alert('动态注册 onload 事件，所有代码');
        }
    </script>
</head>
<body>  这里就不用再写οnlοad=" "了

</body>
</html>

2.onclick单击事件

常用于按钮的点击响应操作。也分为静态注册和动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
    <script type="text/javascript">
        
        function onclickFun() {
            alert('静态注册的 onclick 事件');
        }
        
        window.onload=function () {
            var btn=document.getElementById("btn02");
            btn.onclick =function () {
                alert('动态注册的 onclick 事件');
            }
            
        }
    </script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>     //静态注册
<button id="btn02"> 按钮2 </button>			    //动态注册
</body>
</html>

3. onblur失去焦点事件

什么是失去焦点？

想象一下学习通的看视频过任务点时，每当鼠标离开视频界面视频就会暂停。

我们可以把视频看作一个焦点，鼠标离开后就是发生了一次失去焦点事件。

onblur事件在失去焦点后触发，分为静态触发和动态触发，常用于输入框失去焦点后验证其输入内容是否合法。

console 是控制台对象，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出，用于测试使用

log()是其打印的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
    <script type="text/javascript">
    //静态注册失去焦点
    function onblurFun() {
        console.log("静态注册失去焦点事件");
        alert('静态:离开文本框了，亲！');
    }
    //动态注册 onblur 事件
    window.onload=function () {
        var pwd=document.getElementById("passwd");
        pwd.onblur=function () {
            console.log('动态注册失去焦点事件');
            alert('动态:离开文本框了，亲！');
        }
    }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"> <br/>
    密码：<input type="passwd" id="passwd"> <br/>
</body>
</html>

4. onchange 内容改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
    <script type="text/javascript">
        //静态注册
        function onchangeFun() {
            alert('女神已经改变了');
        }
        //动态注册
        window.onload=function () {
            var sel=document.getElementById("select");
            sel.onchange=function (){
                alert('男神已经改变了');
            }
        }
    </script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun()">
    <option>--女神--</option>
    <option>dd</option>
    <option>ee</option>
    <option>ff</option>
</select>
<br/> <br/>
请选择你心中的男神：
<select id="select">
    <option>--男神--</option>
    <option>aa</option>
    <option>bb</option>
    <option>cc</option>
</select>
</body>
</html>

5. onsubmit 表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS-2021-01-15</title>
    <script type="text/javascript">
        function onsubmitFun() {
            //假设这一部分内容要验证所有表单项是否合法，如果有一个不合法就输出提示，并阻止表单提交
            alert("静态注册表单提交事件----发现不合法");
            return false; //返回false，阻止提交
        }
        window.onload=function (){
            var fm=document.getElementById("form");
            fm.onsubmit=function (){
                //检查环节
                alert("动态注册表单提交事件----发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
                                                <!--return false 可以阻止 表单提交 -->
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册"/>     <!-- 提交成功就跳转到百度-->
</form>

<form action="http://www.baidu.com" method="get" id="form">
    <input type="submit" value="动态注册"/>
</form>

</body>
</html>

种下一颗草莓

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件

js中的事件事件是电脑输入设备与页面进行交互的响应。常用的事件：onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作onclick 单击事件：常用于按钮的点击响应操作。onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。事件的注册：什么是事件的注册（绑定）？就是告诉浏览器，当事件
复制链接

扫一扫