JS事件的学习

最新推荐文章于 2025-06-03 22:58:12 发布

原创最新推荐文章于 2025-06-03 22:58:12 发布 · 300 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js的事件学习</title>
        <script type="text/javascript">
            //单击事件      
            function testOnclick(){
                alert("大家好，我是张三");
            }
            //双击事件
            function testOndblclick(){
                alert("大家好，我是李四");
            }
            //鼠标悬停事件
            function testOnmouseover(){
                alert("我进来了");
            }
            //鼠标移出事件
            function testOnmouseout(){
                alert("我出去了");
            }
            //鼠标移动事件
            function testOnmousemove(){
                alert("我移动了");
            }
            //页面加载事件
            function testOnload(){
                alert("我被加载了");
            }
            //失去焦点事件
            function testOnblur(){
                alert("失去焦点事件");
            }
            //获取焦点事件
            function testOnfocus(){
                alert("获得焦点事件");
            }
        </script>
        <style type="text/css">
            #div01{
                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: bisque;
            }
            #div02{
                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body onload="testOnload()">
        <h3>js事件的学习</h3>
        <hr />
        <input type="button" id="" name="" value="单击事件" onclick="testOnclick()" />
        <input type="button" id="" name="" value="双击事件" ondblclick="testOndblclick()" />
        <div id="div01" onmouseover="testOnmouseover()" onmouseout="testOnmouseout()">
            测试鼠标悬停跟移出事件
        </div>
        <div id="div02" onmousemove="testOnmousemove()">
            测试鼠标移动事件
        </div>
        <hr />
        <input type="text" id="" name="" value="" onblur="testOnblur()"/>
        <input type="text" id="" name="" value="" onfocus="testOnfocus()"/>
    </body>
</html>