Java web第二天--静态、动态事件的四种事件

最新推荐文章于 2022-10-20 20:13:14 发布

cc.ChenLy

最新推荐文章于 2022-10-20 20:13:14 发布

阅读量424

点赞数

本文链接：https://blog.csdn.net/weixin_46589442/article/details/107368961

版权

onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //动态注册onclick事件（document表示的是整个页面）
        //1、获取标签对象，2、通过标签对象.事件名 = function（）{}
        window.onclick = function () {
            var btnobj = document.getElementById("btn1");
            btnobj.onclick = function(){
                alert("动态注册的onclick事件");
            }

        }
    </script>

</head>
<body>
    <button id="btn1">按钮</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurfun() {
            //console是控制台对象，log是打印的方法(在浏览器的控制台查看，f12)
            console.log("静态注册失去焦点");
        }
        //动态注册
        window.onload = function () {
            //1、获取标签对象，2、
           var passwordobj = document.getElementById("password");
           // alert(passwordobj);
            passwordobj.onblur = function () {
                console.log("动态的");
            }
        }

    </script>

</head>
<body>
   用户名：<input type="text" onblur="onblurfun()"><br>
    密码：<input id="password" type="text">
</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 setobj = document.getElementById("set01");
           setobj.onchange = function () {
                alert("又改变了");
           }
        }

    </script>

</head>
<body>
    请选择
    <select onchange="onchangefun()">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    请选择
    <select id="set01">
        <option>11</option>
        <option>22</option>
        <option>33</option>
    </select>


</body>
</html>

onsubmit事件

<!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 formobj = document.getElementById("form01");
            formobj.onsubmit = function () {
                alert("动态注册--发现不合法");
                return false;

            }
       }

    </script>

</head>
<body>
   <form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
       <input type="submit" value="静态注册">
   </form>
   <form action="http://localhost:8080" method="get" id="form01">
       <input type="submit" value="动态注册">
   </form>


</body>
</html>

cc.ChenLy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java web第二天--静态、动态事件的四种事件

onclick事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> //动态注册onclick事件（document表示的是整个页面） //1、获取标签对象，2、通过标签对象.事件名 =
复制链接

扫一扫