onload：一张页面或一幅图像完成加载
事件会在页面或图像加载完成后立即发生。
通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*常见的事件
* 1.点击事件
* onclick 当用户点击某个对象时调用的事件句柄。
* ondblclick 当用户双击某个对象时调用的事件句柄。
* 2.焦点事件
* onblur 元素失去焦点时触发
* onfocus 元素获取焦点时触发
* 3.加载事件
* onload：一张页面或一幅图像完成加载
* 4.鼠标事件
* oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发。
* onmousedown 鼠标按钮被按下。
* onmouseup 鼠标按键被松开。
* onmousemove 鼠标被移动。
* onmouseover 鼠标移到某元素之上。
* onmouseout 鼠标从某元素移开。
* onmouseenter 当鼠标指针移动到元素上时触发。
* onmouseleave 当鼠标指针移出元素时触发
* 5.键盘事件
* onkeydown 某个键盘按键被按下。
* onkeyup 某个键盘按键被松开。
* onkeypress 某个键盘按键被按下并松开。
* 6.选中和改变
* onselect 用户选取文本时触发 ( <input> 和 <textarea>)
* onchange 该事件在表单元素的内容改变时触发( <input>,<keygen>,<select>, 和 <textarea>)
* 7.表单事件
* onsubmit 表单提交时触发
* onreset 表单重置时触发
* **/
//2.onload：一张页面或一幅图像完成加载
//窗口整体加载完成，再执行代码
window.onload = function () {
//1.onblur 元素失去焦点时触发,用户点到其他元素上的时候
//一般用于表单校验。例如：输入用户名判断是否合法，密码安全系数
document.getElementById("username").onblur = function () {
alert("失去焦点");
}
//3.绑定鼠标事件
onmouseover 鼠标移到某元素之上。
document.getElementById("username").onmouseover = function () {
alert("鼠标来了");
}
//4.onmousedown鼠标按钮被按下,会传入一个对象event（事件对象）,方法参数随便起名也行
document.getElementById("username").onmousedown = function (event) {
//alert("鼠标按下了");
alert(event.button);
}
//5.onkeydown 某个键盘按键被按下。
document.getElementById("username").onkeydown = function (event) {
if(event.keyCode==13){
alert("提交表单")
}
}
//6.onchange该事件在表单元素的内容改变时触发
document.getElementById("username").onchange = function (event) {
alert("数据被改变");
}
document.getElementById("city").onchange = function (event) {
alert("数据被改变");
}
//7.onsubmit 表单提交时触发
document.getElementById("form").onsubmit = function () {
//校验用户名格式是否正确
var flag = true;
//返回true或者不返回就能被提交，返回false就无法提交
return flag;
}
function checkForm() {
return false;
}
}
</script>
</head>
<body>
<form id="form" action="#" onclick="return checkForm();">
<input id="username" name="username" type="text">
<select name="" id="city">
<option value="">选择城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">杭州</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>