JS_事件-CSDN博客

本文链接：https://blog.csdn.net/LOVEcao_YU/article/details/132976237

本文详细介绍了JavaScript中事件绑定的两种方式，即直接在标签上使用属性和动态通过JS找到元素后绑定，以及焦点、鼠标、键盘和内容改变等常见事件的使用示例，包括onfocus、onblur、onmouseover、onmouseout、onkeyup、onkeydown和onchange等。

摘要由CSDN通过智能技术生成

事件的绑定：

方式一：直接在标签上使用对应的属性即可

方式二：先试用JS找到需要绑定事件的标签，再给这个标签绑定事件。

注意：使用方式二时，关注代码的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的绑定</title>
    <script>
        function show(){
            console.log("事件的绑定方式一");
        }
    </script>
</head>
<body>
    <!--方式一-->
    <input type="button" value="测试" onclick="show()">
    <!--方式二-->
    <input type="button" value="测试" id="b">

    <script>
        var demo=document.getElementById("b");
        demo.onclick=function (){
            console.log("事件的绑定方式二");
        }
    </script>
</body>
</html>

注：按f12查看运行结果。

焦点事件

注意：点击输入框，，则该输入框获取焦点，点击输入框以外的地方，则该输入框失去焦点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
    <style>
        input{
            width: 100px;
            height: 40px;
            border: 5px;
            background-color: aqua;
        }
    </style>
    <script>
        function f(){
            var demo=document.getElementsByTagName("input")[0];
            demo.style.width="200px";
            demo.style.height="80px";
            demo.style.backgroundColor="blue";
        }
        function b(){
            var demo=document.getElementsByTagName("input")[0];
            demo.style.width="100px";
            demo.style.height="40px";
            demo.style.backgroundColor="aqua";
        }
    </script>
</head>
<body>
    <!--onfocus聚焦    onblur失焦-->
    <input type="text" onfocus="f()" onblur="b()">
</body>
</html>

鼠标事件

onmouseover（）鼠标移上去变换，onmouseout（）鼠标移开复原

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        #t{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="t"></div>

    <!--onmouseover鼠标移上去，onmouseout鼠标移开-->
    <script>
        var demo=document.getElementById("t");
        demo.onmouseover=function (){
            demo.style.width="200px";
            demo.style.height="200px";
            demo.style.borderRadius="50%";
        }
        demo.onmouseout=function (){
            demo.style.width="100px";
            demo.style.height="100px";
            demo.style.borderRadius="0%";
        }
    </script>
</body>
</html>

键盘事件

onkeyup（）、onkeydown（）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script>
        function u(){
            console.log("键盘松开")
        }
        function d(){
            console.log("键盘按下去")
        }
    </script>
</head>
<body>
    <input type="text" onkeyup="u()" onkeydown="d()">
</body>
</html>

注：按f12查看

内容改变事件（通常对下拉列表使用）

onchange（）

注意：打开下拉列表，，选择与之前不同的选项才能触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容改变事件</title>
</head>
<body>
    <select id="sl">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

    <script>
        var demo=document.getElementById("sl");
        demo.onchange=function (){
            console.log("内容改变了");
        }
    </script>
</body>
</html>

页面加载完成事件

onload（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容改变事件</title>
    <script>
        function l(){
            var demo=document.getElementById("sl");
            demo.onchange=function (){
                console.log("内容改变了");
            }
        }
    </script>
</head>
<body onload="l()">
    <select id="sl">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</body>
</html>

#学无止境#