JavaScript中常用的事件

大西瓜写java、C#、.NET

已于 2024-02-20 16:17:24 修改

阅读量793

点赞数 3

文章标签： javascript 开发语言 ecmascript

于 2022-11-20 19:37:58 首次发布

本文链接：https://blog.csdn.net/m0_66971047/article/details/127952694

版权

事件：

相当于监听器之类的：一种能被JavaScript侦测到，网页中每个元素都可以产生某些可以触发Javascript函数的事件；

一、鼠标单击事件：

属性：onclick 当用户点击某个事物的句柄

属性：oncontextmenu 当用户点击鼠标右键打开上下文菜单时触发

属性：ondblclicl 当用户双击某个对象调用事件句柄

属性： onmousedown 鼠标按钮按下

属性： onmouseleave 当鼠标指针移除元素时触发

属性： onmousout 鼠标从元素上移开

属性：onmousemove 鼠标被移动

属性： onmouseup 鼠标按键被送开

<body>
    <!-- onclick 点击鼠标触发 -->
    <div class="change one" onclick="demo01()" onmouseover="demo02()">这是一个惊喜和子</div>
 
    <br><br>
    <!-- onmouseover -->
    <div class="change two" onmouseover="demo02()" onmouseout="demo03()">开盖有惊喜！</div>
 
    <div>
        <input type="search" name="search" onkeyup="demo04(event)">
    </div>
</body>
<script>
    function demo01(){
        alert("Surprise~~~");
        for(var i = 0; i <= 10; i++){
            console.log(i);
        }
    }
 
    function demo02(){
        console.log("恭喜您打开了神秘盒子，但是没有中奖！");
    }
    
    function demo03(){
        console.log("你快回来~~~~~");
    }
 
    function demo04(event){
        console.log(event.keyCode);
        if(event.keyCode == 32){
            window.location.href = "https://www.vip.com/"
        }
    }
</script>

二、键盘事件：

属性：onkeydown 某个键盘被按下

属性：onkeypress莫个键盘按键被按下并松开

属性：onkeyup摸个键盘被松开

<body>
    <!-- onchange 域的内容被改变时触发 -->
    <input type="text" onchange="demo01()">
    <br><br>
    <!-- onblur 光标离开时触发的事件 -->
    <input type="text" onblur="demo02()">
    <br><br>
    <!-- onfocus 光标聚焦事件 -->
    <input type="text" onfocus="demo03()">
</body>
<script>
    function demo01(){
        console.log("触发了onchange事件");
    }
 
    function demo02(){
        console.log("触发了onblur事件");
    }
 
    function demo03(){
        console.log("触发了onfocus事件");
    }
</script>

三、表单事件：

属性   onblur   元素失去焦点时触发
属性   onchange   该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
属性   onfocus   元素获取焦点时触发
属性   onfocusin   元素即将获取焦点时触发
属性   onfocusout   元素即将失去焦点时触发
属性   oninput   元素获取用户输入时触发
属性   onreset   表单重置时触发
属性   onsearch   用户向搜索域输入文本时触发 ( <input="search">)
属性   onselect   用户选取文本时触发 ( <input> 和 <textarea>)
属性   onsubmit   表单提交时触发

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
 
    div.login{
        width: 40%;
        height: 400px;
        background-color: aqua;
        margin: 50px auto;
        padding-top: 20px;
        background-image: url(../img/宇航员.gif);
        color: white;
        border-radius: 10px;
    }
 
    div.login h1{
        text-align: center;
    }
 
    form{
        width: 80%;
        height: 80%;
        margin: 30px auto;
    }
 
    div.userinput{
        width: 80%;
        height: 20%;
        margin: 40px auto;
    }
 
    div.userinput label{
        font-size: 20px;
    }
    div.userinput input{
        width: 70%;
        height:35px;
        margin-left: 20px;
        border-radius: 10px;
        outline: none;
    }
 
    div.buttonStyle{
        width: 80%;
        height: 20%;
        margin: auto;
    }
 
    input[type="submit"]{
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background-color: gainsboro;
        border: none;
    }
 
    div#model{
        width: 40%;
        height: 420px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        position: absolute;
        top: 0;
        left: 460px;
    }
 
    span#modelText{
        color: red;
        font-size: 30px;
        text-align: center;
        line-height: 420px;
        font-weight: 600;
    }
 
    span#hide{
        color: yellow;
        font-size: 30px;
        position: absolute;
        top: 10px;
        right: 10px;
    }
</style>
<body>
    <div style="position: relative;">
        <div class="login">
            <h1>霍格沃兹入口</h1>
            <form action="https://www.baidu.com" method="get" onsubmit="return validity()">
                <div class="userinput">
                    <label for="username">用户账号:</label>
                    <input type="text" name="username" id="username">
                </div>
                <div class="userinput">
                    <label for="userpwd">登录密码:</label>
                    <input type="password" name="userpwd" id="userpwd">
                </div>
                <div class="buttonStyle">
                    <input type="submit">
                </div>
            </form>
        </div>
 
        <!-- 模态框 -->
        <div id="model">
            <span id="modelText"></span>
            <span id="hide" onclick="hide()">X</span>
        </div>
    </div>
</body>
<script>
    // 进入页面时，获取模态框节点并隐藏
    var model = document.getElementById("model");
    model.style = "display:none";
    // 获取模态框中文子节点
    var modelText = document.getElementById("modelText");
 
    function validity(){
        // 获取账号节点
        var username = document.getElementById("username");
        // 获取密码节点
        var userpwd = document.getElementById("userpwd");
        // 姓名正则
        var nameReg = /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/;
        // 密码正则
        var pwdReg = /^[0-9a-zA-Z]{6,12}$/;
 
        // 验证账号是否为空
        if(username.value.length == 0){
            modelBlock();
            modelText.innerHTML = "账号不能为空";
            return false;
        }
 
        // 验证账号格式
        if(!nameReg.test(username.value)){
            modelBlock();
            modelText.innerHTML = "账号格式有误";
            return false;
        }
 
        // 验证密码是否为空
       if(userpwd.value.length == 0){
            modelBlock();
            modelText.innerHTML = "密码不能为空";
            return false;
        }
 
        // 验证密码格式
        if(!pwdReg.test(userpwd.value)){
            modelBlock();
            modelText.innerHTML = "密码格式有误";
            return false;
        }
    }
 
    function modelBlock(){
        // 显示模态框
        model.style = "display:block";
    }
 
    function hide(){
        // 关闭模态框
        model.style = "display:none";
    }
</script>
 
</html>