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