常见事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function f1() {
var input=document.getElementsByName("username")[0];
input.style.border = "2px solid red";
}
function f2() {
var input=document.getElementsByName("username")[0];
input.style.border="";
}
function f3() {
var input=document.getElementsByName("email")[0];
input.style.background="red";
}
function f4() {
var input=document.getElementsByName("email")[0];
input.style.background="";
}
function f5() {
alert("请填写完整");
return false;
}
function f6() {
alert("图像加载完毕");
}
function f7() {
alert("页面加载完毕")
}
//等同于：
// window.onload=function () {
// alert("页面加载完毕")
// }
window.onload=f7;//思考：这里能否加引号以及加括号与不加括号的区别？
</script>
</head>
<body >
<h1>获得焦点与失去焦点事件</h1>
用户名：<input type="text" name="username" onfocus="f1()" onblur="f2()">
<h1>鼠标经过事件</h1>
<input type="text" name="email" onmouseover="f3()" onmouseout="f4()"/>
<h1>表单提交事件</h1>
<form action="test.html" onsubmit="return f5()" ><!--这里加return是为了阻止表单提交和跳转到另一个页面，它把它拦截到了当前表单的页面（f5()方法要返回false）-->
<input type="submit" >
</form>
<h1>onload事件</h1>
<img src="20171122191603_896cd9.jpg" onload="f6()">
</body>
</html>
运行结果：
结构行为样式相分离
示例：让代码的html结构，style结构，onclick事件相分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
background: blue;
}
</style>
</head>
<body >
<div id="test" ></div>
</body>
<script>
function change() {
document.getElementById("test").style.background="pink";
}
document.getElementById("test").onclick=change;//思考，这里为什么不加括号？
/* 以上4行代码也可以合并用如下的匿名函数:
document.getElementById("test").onclick=function () {
this.style.background="pink";
}*/
</script>
</html>
调用函数时加括号与不加括号的区别
上面两个例子中有两处代码分别是window.onload=f7和document.getElementById("test").onclick=chage，为什么这里的事件调用函数都没有加括号，而html代码里onclick属性的引号里调用函数都要加括号呢？
当在js中事件调用函数的时候，不加括号其实就是把函数的指针赋予了事件，此时，事件与那个函数引用了同一块地址，两者是等同的，当事件发生时才执行函数体；而如果不加括号的话，js执行到那行代码就会执行函数体，不会等事件被触发。
而在html中，onclick属性中的内容其实就是在conclick函数里的内容，可以做一下测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
background: blue;
}
</style>
</head>
<body >
<div id="test" onclick="change();console.log('hello world');"></div>
</body>
<script>
function change() {
document.getElementById("test").style.background="pink";
}
console.log("1:"+document.getElementById("test").onclick)
console.log("2:"+document.getElementById("test").getAttribute("onclick"))
</script>
</html>
打印结果：
可以看出，上面的onclick属性引号里的内容其实是在onclick函数里的。明白这一点，甚至可以在里面写其他js语句，如我上面写的打印hello world的语句。
你可能会怀疑，js中是否也是这样？我们也可以来做一下测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
background: blue;
}
</style>
</head>
<body >
<div id="test" ></div>
</body>
<script>
function change() {
document.getElementById("test").style.background="pink";
}
document.getElementById("test").onclick=change;
console.log("1:"+document.getElementById("test").onclick)
console.log("2:"+document.getElementById("test").getAttribute("onclick"))
</script>
</html>
打印结果：
可以看到，js和html中的不同。js中的事件就是函数，不存在包含关系了。它们俩引用的是同一个地方。
事件对象
先导知识：js函数内默认有个默认变量，保存你的入参，叫:arguments，它是一个数组。
event对象代表事件的状态，是js的一个系统内置对象。平时无法使用，当DOM元素发生按键、鼠标等等各种事件时，系统会自动根据DOM元素触发的事件生成一个event对象。这个event对象怎么传递呢？我看到的都说和浏览器的类型有关，在chrome浏览器中，event对象作为事件函数的第一个参数传入，默认名称为event；在ie中event作为window的属性，是一个全局变量。但是我测试了这两个浏览器，好像都一样，event对象既是全局变量又作为第一个参数被传入了。不知道我测试的是不是有问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
background: blue;
}
</style>
</head>
<body >
<div id="test" onclick="change();console.log('1:'+window.event);console.log('2:'+arguments[0])" ></div>
</body>
<script>
var i
function change() {
console.log('3:'+window.event)
}
console.log(document.getElementById("test").onclick)
</script>
</html>
在chrome中运行（点击div）：
在IE中运行（点击div）：
可以看到两个浏览器的运行结果是一样的。
另外，你可以自定义第一个参数的名称，传的反正都是event对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 300px;
width: 300px;
background: blue;
}
</style>
</head>
<body >
<div id="test" ></div>
</body>
<script>
var i
function change(e) {
console.log('3:'+window.event)
console.log('4:'+arguments[0])
console.log('5:'+e)
}
document.getElementById("test").onclick=change;
console.log(document.getElementById("test").onclick)
</script>
</html>
运行结果（点击方块）：
这样也能看出，在chrome浏览器中event对象既是window上定义的一个变量，也是onclick函数的第一个参数。
事件委托
把事件添加给父级元素，在父级元素的事件函数中利用event对象的target属性来获取触发事件的具体子元素，再对其进行操作。
示例：点击方块，变色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
height: 100px;
width: 200px;
background: white;
border: 0;
border-collapse: collapse;
}
td{
border: 1px solid black;
}
</style>
</head>
<body >
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
document.getElementsByTagName("table")[0].onclick=function (ev) {
ev.target.style.background="green";
}
</script>
</html>
运行效果：
