JavaScript常用事件详解_html javascript 事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45958440/article/details/127924283

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

鼠标事件

属性	描述
onclick	当用户点击某个对象时调用的事件句柄。
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。
onmousedown	鼠标按钮被按下。
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
onmouseup	鼠标按键被松开。

eg：

<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	某个键盘按键被松开。

eg：

<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	表单提交时触发

eg：

<!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>