JavaScript常用事件的类型演示

2024-01-03 06:09:19

目录

(一).表单事件

1).submit:提交

2).reset：重置

3).change：内容改变且失去焦点时触发

4).input：内容改变时触发（兼容性不好）

注： submit和reset通常是绑定到form表单中使用的,change通常用于input和selcet表单中

<script>
    window.onload = function () {
        var form = document.getElementsByTagName("form")[0]
        form.onsubmit = function () {
            alert("submit事件已触发")
            //阻止默认提交事件
            return false;
        }
        form.onreset = function () {
            alert("reset事件已触发")
            //阻止默认提交事件
            return false;
        }
        form.onchange = function () {
            alert("change事件已触发")
        }
         form.oninput = function () {
            console.info("input事件已触发")
        }
    }
</script>
<body>
<form method="get" action="">
    <ul>
        <li>用户名：<input type="text"></li>
        <li>密&nbsp;&nbsp;码：<input type="password"></li>
        <li><input type="submit" value="提交"><input type="reset" value="重置"></li>
    </ul>
</form>
</body>

(二).UI事件

1).load:页面加载完毕后触发
2).unload：页面卸载时触发（没啥意义）
3).beforeunload：页面卸载前触发
4).select：选中时触发，通常应用于input
5).resize：窗口大小改变时触发，一般绑定在window
6).scroll:有滚动时触发，一般绑定在window
核心代码演示：

<script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0]
            input.onselect =function(){
                alert("文本被选中了")
            }
            window.onresize = function () {
                alert("窗口大小发生了改变！")
            }
            window.onscroll = function () {
                console.info("窗口滚动中......")
            }
        }
    </script>
    <body>
        <input type="text">
    </body>

(四).鼠标事件

1).focus: 获取焦点

应用： 光标定位输入框输入内容
2).blur：失去焦点

应用： 输入框输入内容的局部刷新
核心代码演示：

<script>
    window.onload = function () {
        // 获取输入框
        var input = document.getElementsByTagName("input")[0]
        // 为input注册事件
        input.onfocus = function () {
            alert("input输入框获得了焦点！！")
        }
        input.onblur = function () {
            alert("input输入框失去了焦点！！")
        }
    }
</script>
<body>
<input type="text">
</body>

(五).键盘事件

1).click：鼠标点击
2).mouseover：鼠标悬停
3).mouseout：鼠标离开
4).mousedown：鼠标按下
5).mouseup：鼠标抬起
6).mousemove：鼠标移动

注： 鼠标事件应用比较多
核心代码演示：

<script>
    window.onload = function () {
        //获取元素,测试功能时请注释其他功能
        var btn = document.getElementsByTagName("input")[0]
        btn.onclick = function () {
           alert("鼠标点击")
        }
        btn.onmousemove = function () {
            alert("鼠标悬停")
        }
        btn.onmouseout = function () {
            alert("鼠标离开")
        }
        btn.onmousedown = function () {
            alert("鼠标按下")
        }
        btn.onmousedup = function () {
            alert("鼠标抬起")
        } 
        btn.onmousemove = function () {
            alert("鼠标移动")
        }
    }
</script>
<body>
<input type="button" value="鼠标事件">
</body>

🍋最后🍋

总结不易，希望小宝们不要嫌弃哦！😀

文章来源:https://blog.csdn.net/2301_78753262/article/details/135333202
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。