什么是事件？事件是电脑输入谁被与页面进行交互的响应
事件的注册又分为静态注册和动态注册
静态注册事件：通过HTML标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册
动态注册事件：是指通过js代码得到标签的dom对象，然后在通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码，叫做动态注册。
动态注册基本步骤：
1，获取标签对象
2，标签对象.事件名 = function(){}
javaScript-onload事件
onload加载完成时间；页面加载完成之后，常用于做页面js代码初始化操作
onload时间是浏览器解析完成之后就会自动触发的事件
静态注册onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onloadFun(){
alert("静态注册onload事件");
}
</script>
</head>
<body onload="onloadFun();">
</body>
</html>
动态注册onload事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onloadFun(){
alert("静态注册onload事件");
}
window.onload = function(){
alert("动态注册的onload事件");
}
</script>
</head>
<body>
</body>
</html>
JavaScript-onclick事件
onclick单击事件；常用于按钮的点击响应操作
静态注册onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onclickFun(){
alert("静态注册onload事件");
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮1</button>
<button>按钮2</button>
</body>
</html>
动态获取onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onclickFun(){
alert("静态注册onload事件");
}
window.onload = function(){
var btuobj = document.getElementById("id01");
btuobj.onclick = function() {
alert("动态注册onclick事件");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">按钮1</button>
<button id = "id01">按钮2</button>
</body>
</html>
document是JavaScript语言提供的一个对象（文档）【这个对象（文档）表示整个页面里面的内容】
getElemById（）:通过id属性获取标签对象
javascript-onblur事件
onblur失去焦点时间；常用于输入框失去焦点后验证其输入内容是否合法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onblurFun(){
console.log("静态注册oonblur事件");
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input type="text" ><br/>
</body>
</html>
动态onblur时间注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onblurFun(){
console.log("静态注册oonblur事件");
}
window.onload = function() {
var passwordobj = document.getElementById("password");
passwordobj.onblur = function() {
console.log("动态注册onblur事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password"type="text" ><br/>
</body>
</html>
当光标不在是选中密码框时，就会触发事件
javascript-onchange事件
onchange内容发生改变事件
静态注册onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onchangeFun(){
alert("国籍已经改变了");
}
</script>
</head>
<body>
请选择你的国籍：
<select onchange = "onchangeFun();">
<option>--国籍--</option>
<option>--中国--</option>
<option>--俄罗斯--</option>
<option>--巴基斯坦--</option>
</select>
</body>
</html>
动态注册onchange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onchangeFun(){
alert("国籍已经改变了");
}
window.onload = function() {
var changeobj = document.getElementById("id01");
changeobj.onchange = function() {
alert("国籍已经发生改变，但这是动态注册的onchange事件");
}
}
</script>
</head>
<body>
请选择你的国籍：
<select id = "id01">
<option>--国籍--</option>
<option>--中国--</option>
<option>--俄罗斯--</option>
<option>--巴基斯坦--</option>
</select>
</body>
</html>
javascript-onsubmit事件
onsubmit表单提交事件；常用于表单提交前，验证所有表单项是否合法。
静态注册onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onsubmitFun() {
alert("静态注册表单提交事件");
return false;
}
</script>
</head>
<body>
<form action = "http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
</body>
</html>
这里的静态方法为什么要return false呢？
一般的网页里面在我们提交表单的时候，如果发现表单里面的信息合不合法，就会触发这个onsubmit事件，并且在表单提交标签中属性onsubmit的值如果为return false那么表单将不会提交到相应的服务器，但如果我们想之前的静态方法中一样来写静态方法的话，就会出现当你的表单信息不合法他会触发onsubmit事件并且他也会将表单提交到服务器，那么这久不能达到预期效果，我们所希望的就是在他触发onsubmit事件后表单不会被提交到服务器，那么我们就要在他提示之后，将form标签中onsubmit的值改为return false, 因此我们要在方法最后要return false。
在下面的动态注册中也是一样的原因。
动态注册onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript常用事件</title>
<script type="text/javascript">
function onsubmitFun() {
alert("静态注册表单提交事件");
return false;
}
window.onload = function() {
var submitobj = document.getElementById("form01");
submitobj.onsubmit = function() {
alert("动态注册表单提交事件");
return false;
}
}
</script>
</head>
<body>
<form action = "http://localhost:8080" id = "form01" onsubmit="return onsubmitFun();">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
