JavaScript事件

efonfighting

发布于 2020-02-13 17:17:58

5500

发布于 2020-02-13 17:17:58

文章被收录于专栏：一番码客一番码客

本文目录

概述

鼠标事件输入框相关的事件表单提交事件onChange事件键盘事件参考

概述

鼠标事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            div {
                width: 100px;
                height: 100px;
                border: #FF0000 solid 1px;
            }
        </style>
    </head>

    <body>
        <div id="div1" onmousedown="onmousedownFn()" onmouseenter="onmouseenterFn()" onmouseleave="onmouseleaveFn()" onmousemove="onmousemoveFn()" onmouseout="onmouseoutFn()" onmouseover="onmouseoverFn()" onmouseup="onmouseupFn()" onmousewheel="onmousewheelFn()">

        </div>

        <script type="text/javascript">
            function onmousedownFn() {
                console.log("鼠标按下")
            }

            function onmouseenterFn() {
                    console.log("鼠标")
            }

            function onmouseleaveFn() {
                console.log("鼠标离开")
            }

            function onmousemoveFn() {
                console.log("鼠标移动")
            }

            function onmouseoutFn() {
                console.log("鼠标离开")
            }

            function onmouseoverFn() {
                console.log("鼠标悬停在上方")
            }

            function onmouseupFn() {
                console.log("鼠标抬起")
            }

            function onmousewheelFn() {
                console.log("鼠标滚轮事件")
            }
        </script>
    </body>

</html>

输入框相关的事件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        用户名:<input type="text" id="username" onfocus="onfocusFn()" onblur="onblurFn()" />
        <script type="text/javascript">
            function onfocusFn() {
                console.log("获取到焦点了")
            }

            function onblurFn() {
                console.log("失去焦点了")
            }
        </script>
    </body>

</html>

表单提交事件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <form onsubmit="return checkForm()">
            用户名:<input type="text" id="username" name="usr" value="" /><br />
            <input type="submit" value="注册" />
        </form>

        <script type="text/javascript">
            function checkForm() {
                var inputTag = document.getElementById("username");
                var usernameInput = inputTag.value;
                if(usernameInput == "zhangsan") {
                    return false;
                }
                return true;
            }
        </script>
    </body>

</html>

onChange事件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--
            this 代表自己,就是当前元素
        -->
        <select id="city" onchange="onchangeFn(this)">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>

        <script type="text/javascript">
            function onchangeFn(obj) {
                console.log(obj.value)
            }
        </script>

        <!--<script type="text/javascript">
            function onchangeFn() {
                var selectTag = document.getElementById("city")
                console.log(selectTag.value)
            }
        </script>-->
    </body>

</html>

键盘事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="text"  />

        <script type="text/javascript">

            window.onkeydown=function(){
                console.log("键盘按下")
            }

            window.onkeypress=function(){
                console.log("键盘释放")
            }

            window.onkeyup=function(e){
                console.log(e)
            }
        </script>
    </body>
</html>