web基础学习笔记(五)之常用的事件:onload、onclick、onblur

最新推荐文章于 2023-01-12 15:51:28 发布

weixin_44014196

最新推荐文章于 2023-01-12 15:51:28 发布

阅读量886

点赞数

分类专栏： web学习文章标签： js

本文链接：https://blog.csdn.net/weixin_44014196/article/details/108476453

版权

web学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

常用的事件：

onload事件

<!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加载完成的事件   页面加载完成之后，常用于做页面js代码初始化操作
        onclick单击事件        常用于按钮的点击响应事件
        onblur失去焦点事件     常用于输入框失去焦点后验证其输入内容是否合法
        onchange内容发生改变事件    常用于下拉列表个输入框内容发生改变后操作
        onsubmit表单提交事件      常用于表单提交前，验证所有表单项是否合法-->
<!--事件的注册或者绑定
    就是告诉浏览器当时间响应后需要执行哪些操作
    静态注册：通过html标签的事件属性直接赋予事件响应后的代码
    动态注册：先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){} 这种形式赋予事件响应后的代码-->
<!--静态注册unload事件
    <body onload="onloadFun()">  -->
<body>
</body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*静态注册*/
        function onclickFun() {
            alert("静态注册onclick事件")
        }
        /*动态注册*/
        window.onload = function () {
            /*1.获取标签对象*/
            /*doucument是对象 代表整个页面的内容*/
            var btnobj = document.getElementById("btn1");/*获取通过id元素*/
            /*2.通过标签对象，事件名 = function(){}*/
            btnobj.onclick = function () {
                alert("动态注册的事件");
            }
        }
    </script>
</head>
<body>
    <!--静态注册onclick事件-->
    <button onclick="onclickFun()">按钮1</button>
    <!--动态注册-->
    <button id="btn1">按钮2</button>

</body>
</html>

onblur失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*onblur失去焦点事件     常用于输入框失去焦点后验证其输入内容是否合法*/
        function onblurFun() {
            /*console是控制台对象，专门用来向浏览器打印输出
            * log是打印的方法*/
            console.log("静态注册失去焦点事件");
        }
        /*动态注册*/
        window.onload = function () {
            var passwordobj = document.getElementById("password");
            passwordobj.onblur = function () {
                alert("动态注册失去焦点事件")
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"><br>
    密码：<input id="password" type="text"><br>

</body>
</html>

onchange内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变");
        }

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


</head>
<!--onchange内容发生改变事件    常用于下拉列表个输入框内容发生改变后操作-->
<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>

表单提交事件

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

        window.onload = function () {
            var fromobj = document.getElementById("form01");
            fromobj.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" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

weixin_44014196

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web基础学习笔记(五)之常用的事件:onload、onclick、onblur

常用的事件：onload事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> /*onload事件的方法*/ function onloadFun() { al
复制链接

扫一扫

专栏目录