<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 鼠标事件 function fun1() { console.log("单击了") } function fun2() { console.log("单击了2次") } function fun3() { console.log("双击了") } function fun4() { console.log("鼠标悬停了") } function fun5() { console.log("鼠标移动了") } function fun6() { console.log("鼠标离开了") } // 键盘事件 function fun7() { console.log("键盘按下了") } function fun8() { console.log("键盘抬起了") } // 表单事件 function func1() { console.log("获得焦点了") } function func2() { console.log("失去焦点了") } function func3(value) { console.log("内容改变为:" + value) } function func4(value) { console.log("选项改变为:" + value) } function func5() { console.log("表单重置了") } function func6() { alert("表单提交了") /* 弹窗的三种方式 alert() 信息提示框 prompt() 信息输入框 confirm() 信息确认框 */ var flag = confirm("确定要提交表单吗") if(!flag){ return false } return true } </script> </head> <body> <!-- 这里的点击操作 是一个事件(就是行为的发生,可能是用户的,可能是浏览器的) 分为鼠标事件、键盘事件、表单事件等 --> <input type="button" value="按钮" onclick="fun1(),fun2()" ondblclick="fun3()" /> <br /> <!-- onmouseover 鼠标在图片之上 悬停 onmousemove 鼠标在图片上移动 onmouseleave 鼠标离开的图片 --> <img src="img/java.jpg" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()" /> <br /> <input type="text" onkeydown="fun7()" onkeyup="fun8()" /> <br> <br> <!-- return 是将结果返回给浏览器 --> <form action="01-dom.html" method="get" onreset="func5()" onsubmit="return func6()"> 用户名:<input type="text" name="realname" onfocus="func1()" onblur="func2()" onchange="func3(this.value)" /> <br /> 账户名:<input type="text" name="loginname" /> <br /> 选择籍贯: <select onchange="func4(this.value)"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">哈尔滨</option> </select> <br/> <input type="submit" value="提交" /> <input type="reset" value="清空" /> </form> </body> </html>