5.2常见事件演示

最新推荐文章于 2024-11-07 13:38:59 发布

CodeWhisperer001

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量67

点赞数

分类专栏： javaScript 文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/wei7a7a7a/article/details/128544290

版权

javaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

鼠标事件

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

键盘事件

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

表单事件

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

页面加载事件

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