5.2常见事件演示

今天药忘吃喽~ 2023-09-27 13:46 32阅读 0赞

鼠标事件

![fe622cf5707d9d4b2571c5623451a658.png][]

> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .d1\{ width: 100px; height: 100px; background-color: greenyellow; \} </style> <script> function fun1()\{ console.log("双击666") \} function fun2()\{ console.log("鼠标按下") \} function fun3()\{ console.log("鼠标抬起") \} function fun4()\{ console.log("鼠标进入") \} function fun5()\{ console.log("鼠标离开") \} function fun6()\{ console.log("鼠标移动") \} </script> </head> <body> <div class="d1" οndblclick="fun1()" οnmοusedοwn="fun2()" οnmοuseup="fun3()" οnmοuseenter="fun4()" οnmοuseleave="fun5()" οnmοusemοve="fun6()"> </div> </body> </html>  
>   
>   
>

键盘事件

![533258114296a0d8e04ea18a1de94f36.png][]

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){
                                    console.info("按钮按下")
                            }
                            function fun2(){
                                    console.info("按钮抬起")
                            }
                            function fun3(){
                                    console.info("按钮按下并抬起")
                            }
                    </script>
            </head>
            <body>
                    <input type="text" onkeydown="fun1()" onkeyup="fun2()" onkeypress="fun3()" />
            </body>
    </html>

![4ca9132afdeebc7ce937982f5e1bd46a.gif][]

![8d9e4a70eb47c9b1cbe36e3651fb0dda.gif][]

表单事件

![dc4b48f51fb8a452bcc26b811c666d8a.png][]

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            function fun1(){console.log("获得焦点");}
                            function fun2(){console.log("失去焦点");}
                            function fun3(){console.log("正在输入");}// 只要输入了,就会触发
                            function fun4(){console.log("内容改变");}// 内部信息发生变化的同时,要失去焦点
                            function fun5(sel){console.log("内容发生改变了"+sel.value)}
                            function fun6(){
                                    alert("发生了提交事件");
                                    // 做了一些运算之后 动态决定表单能否提交
                                    
                                    return false ;
                            }
                            function fun7(){ 
                                    console.log("发生了重置事件");
                                    return true;
                            }
                    </script>
            </head>
            <body>
                    <form method="get"  action="https://www.baidu.com" onsubmit="return fun6()" onreset="return fun7()">
                            <input name=""  value=""  type="text" onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()"/><br />
                            <select name="city" onchange="fun5(this)">
                                    <option selected>-请选择城市-</option>
                                    <option value="1">北京</option>
                                    <option value="2">天津</option>
                                    <option value="3">上海</option>
                                    <option value="4">重庆</option>
                            </select>
                            <br />
                            <input type="submit" value="提交数据" />
                            <input type="reset"  value="重置数据" />
                            
                    </form>
            </body>
    </html>

![feee97d799c71ab3888ba226db62f932.gif][]

![b00d4198a49a4dcc3b4d440397a56060.gif][]

页面加载事件

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <script>
                            
                            function testFun(){
                                    var in1=document.getElementById("i1");
                                    var v1=in1.value;
                                    console.log(v1)
                            }
                            
                    </script>
            </head>
            <body onload="testFun()">
                    <input type="text" value="测试文字" id="i1" />
            </body>
    </html>

![f4ca4d6b8c553eb30cdb97b2791c04d8.gif][]

![c66c50148fb34290489d8a79e2ba0546.gif][]

[fe622cf5707d9d4b2571c5623451a658.png]: https://img-blog.csdnimg.cn/img_convert/fe622cf5707d9d4b2571c5623451a658.png
[533258114296a0d8e04ea18a1de94f36.png]: https://img-blog.csdnimg.cn/img_convert/533258114296a0d8e04ea18a1de94f36.png
[4ca9132afdeebc7ce937982f5e1bd46a.gif]: https://img-blog.csdnimg.cn/img_convert/4ca9132afdeebc7ce937982f5e1bd46a.gif
[8d9e4a70eb47c9b1cbe36e3651fb0dda.gif]: https://img-blog.csdnimg.cn/img_convert/8d9e4a70eb47c9b1cbe36e3651fb0dda.gif
[dc4b48f51fb8a452bcc26b811c666d8a.png]: https://img-blog.csdnimg.cn/img_convert/dc4b48f51fb8a452bcc26b811c666d8a.png
[feee97d799c71ab3888ba226db62f932.gif]: https://img-blog.csdnimg.cn/img_convert/feee97d799c71ab3888ba226db62f932.gif
[b00d4198a49a4dcc3b4d440397a56060.gif]: https://img-blog.csdnimg.cn/img_convert/b00d4198a49a4dcc3b4d440397a56060.gif
[f4ca4d6b8c553eb30cdb97b2791c04d8.gif]: https://img-blog.csdnimg.cn/img_convert/f4ca4d6b8c553eb30cdb97b2791c04d8.gif
[c66c50148fb34290489d8a79e2ba0546.gif]: https://img-blog.csdnimg.cn/img_convert/c66c50148fb34290489d8a79e2ba0546.gif