函数的事件

<body>
    <!-- 单双击事件 -->
    <input type="button" onclick="singleClick('龙')" ondblclick="doubleClick()" value="单双击"><br>
    <div id="d"></div>
    <button id="btn">唐</button>
    <input type="button" onclick="singleClick()" ondblclick="doubleClick('龙1')" value="唐2">
    <div id="id"></div>
    <!-- 变化事件 -->
    <input type="text" id="a" onchange="change()" value="">
    <br>
    <input type="button" value="唐3">
    <br>
    <div id="message"></div>
    <!-- 提交事件 -->
    <form action="" onsubmit="login1()">
        账号: <input type="text" name="name"><br>
        密码: <input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
    <!-- 当前组件 -->
    <input type="button" onclick="singleClick(this)" value="按钮1"><br>
    <input type="button" onclick="singleClick(this)" value="按钮2">
    <br>
    <div id="b"></div>

    <!-- 阻止事件的发生 -->
    <form action="" onsubmit=" return login()">
        账号: <input type="text" name="name" id="name"><br>
        密码: <input type="password" name="password" id="password"><br>
        <input type="submit" value="登录">
    </form>


    <script>
        var btn = document.getElementById('btn');

        //事件类型  如何触发 什么事件  比如鼠标点击(onclick)还是鼠标经过  还是键盘按下
        //事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function () {
            alert('1龙涛');
        }
        //单双击按钮  单击:onclick="singleClick()";双击：ondblclick="doubleClick()"
        function singleClick(d) {
            document.getElementById('d').innerHTML = d;
        }

        function doubleClick() {
            var c = '龙';
            document.getElementById('d').innerHTML = c;
        }

        function singleClick() { //函数里没有参数
            var id = "龙";
            document.getElementById('id').innerHTML = id;
        }

        function doubleClick(id) { //函数里有参数
            // var id=  "双击按钮";
            document.getElementById('id').innerHTML = id;
        }
        //变化事件 onchange
        function change() {

            var message = document.getElementById('message');

            var a = document.getElementById('a');
            message.innerHTML = "唐3:" + a.value;
        }

        //提交事件 onsubmit

        function login1() {
            alert('提交表单');
        }
        //当前组件
        function singleClick(button) { //button只是参数
            //var s = "被点击的按钮是：" + button.value;
            document.getElementById('b').innerHTML = "被点击的按钮是：" + button.value;;
        }

        //阻止事件的发生
        function login() {
            var name = document.getElementById('name');
            var password = document.getElementById('password');
            if (name.value.length == 0) {
                alert("用户名不能为空");
                return false;
            } else if (password.value.length == 0) {
                alert("密码不能为空");
                return false;
            }
            return true;
        }

        //下拉菜单
    </script>
</body>
posted @ 2022-05-25 22:53  龙居居  阅读(30)  评论(0)    收藏  举报