JavaWeb学习之JS事件

最新推荐文章于 2022-11-07 15:13:13 发布

INGg__

最新推荐文章于 2022-11-07 15:13:13 发布

阅读量98

点赞数

分类专栏： JavaWeb 文章标签： javascript html html5

本文链接：https://blog.csdn.net/INGg__/article/details/120015557

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件

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

常用的事件：

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

事件的注册

告诉浏览器，事件响应后要执行哪些操作的代码

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

动态注册：先通过js代码得到标签的dom对象，然后在通过该对象.事件名 = function(){}

基本步骤：

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

onload事件

静态

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function onloadTest(){
            alert("hihhihi");
        }
    </script>
</head>
<body onload="onloadTest();">

</body>
</html>

动态

<!DOCTYPE html>
<html >
<head>
    <script type="text/javascript">
        window.onload = function (){
            alert("dong tai")
        }
    </script>
</head>
<body>

</body>
</html>

onclick事件

静态注册

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
        function onclickFun() {
            alert("jing tai")
        }
    </script>
</head>
<body>
<button onclick="onclickFun()">123</button>
</body>
</html>

动态

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
        window.onload = function (){
            // 1.获取标签对象
            var btobj = document.getElementById("bt01");
            /*
             * document 是JavaScript语言提供的一个对象
             * 通过id获取标签
             */
            // 通过标签对象.事件名 = function(){}
            btobj.onclick = function () {
                alert("动态注册的网站")
            }
        }
    </script>
</head>
<body>
<button id="bt01">123</button> <br>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="zh_CN">
<head>

    <meta charset="UTF-8">
    <script type="text/javascript">
        // jing tai
        function onblurFun() {
            alert("jing tai");
            // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
            // log是打印的方法
            console.log("jing tai shu chu ");
        }

        // dong tai
        window.onload = function (){
            // 1.获取标签对象
            var pwdObj = document.getElementById("pwd");

            pwdObj.onblur = function () {
                console.log("dong tai");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"><br>
    密码：<input type="text" id="pwd"> <br>
</body>
</html>

在这里插入图片描述

onchange事件

<!DOCTYPE html>
<html lang="zh_CN">
<head>

    <meta charset="UTF-8">
    <script type="text/javascript">
        function onchangeFun() {
            alert("changed");
        }

        window.onload = function (){
            var sele = document.getElementById("select02");
            sele.onchange = function (){
                alert("hi")
            }
        }
    </script>
</head>
<body>
    <select onchange="onchangeFun()">
        <option>123</option>
        <option>3443</option>
        <option>4545</option>
    </select> <br>

    <select onchange="onchangeFun()" id="select02">
        <option>123</option>
        <option>3443</option>
        <option>4545</option>
    </select> <br>


</body>
</html>

在这里插入图片描述

onsubmit

<!DOCTYPE html>
<html lang="zh_CN">
<head>

    <meta charset="UTF-8">
    <script type="text/javascript">
        function onsubmitFun() {
            alert("changed");
            return false; // 如果返回false，那么下面的表单将不会提交，注意下面也要带return
        }

        window.onload = function (){
            var sub = document.getElementById("form01");
            sub.onsubmit = function (){
                alert("hi");
                return false; // 可能发现不合法信息，阻止提交
            }
        }
    </script>
</head>
<body>
    <form action="http://localhost:63342/" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="jing tai">
    </form> <br>

    <form action="http://localhost:63342/" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="dong tai" id="form01">
    </form>


</body>
</html>

INGg__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习之JS事件

事件事件是电脑输入设备与页面进行交互的相应。常用的事件：onload 加载完成事件；常用于做页面 js 代码的初始化操作onclick 单击事件；常用于按钮的点击响应操作onblur 失去焦点事件；常用于输入框失去焦点后验证其输入内容是否合法onchange 内容发生改变事件；常用于下拉列表和输入框内容发生改变后操作onsubmit 表单提交事件；常用于表单提交前，验证其是否合法事件的注册告诉浏览器，事件响应后要执行哪些操作的代码静态注册：通过html标签的事件属性直接赋予事件响应
复制链接

扫一扫