事件对象，就是在响应某些事件的处理函数内部第一个传递进来的参数。不同的事件，参数的内容也不同，我们可以根据每一个事件对象能用的功能来实现特殊的需求，下面就是几个案例。
获得鼠标坐标信息
通过事件流对象可以获取到鼠标在浏览器中得各种信息，比如坐标等，可以使用 console.log(event) 打印一下 onclick 事件都有哪些成员。
<script type="text/javascript">
var hh = document.getElementsByTagName("h2")[0];
hh.onclick = function (event) {
console.log(event.clientX + "--------" + event.clientY); // 相对DOM区域坐标
console.log(event.pageX + "--------" + event.pageY); // 相对DOM区域坐标（包含滚动条距离）
console.log(event.screenX + "--------" + event.screenY); // 相对屏幕的坐标
}
</script>
键盘的按键监听
假设一个表单，你想即时获取用户输入的内容，那么就可以通过事件对象来实现。
下面的例子当你在 input 中输入内容的时候，console.log 就会打印你按下按键的 ASCII 码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>js lesson</title>
</head>
<body>
<h2>事件对象</h2>
<input type="text">
</body>
</html>
<script type="text/javascript">
var put = document.getElementsByTagName("input")[0];
put.onkeydown = function(event) {
console.log(event);
console.log(event.keyCode);
}
</script>
阻止事件流产生
关于事件流的描述，请参考：http://www.mycode.net.cn/language/javascript/1224.html
如果想禁用事件流，可以通过事件对象的 stopPropagation 方法来阻止事件向下传递。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>js lesson</title>
<style>
div {
width: 400px;
height: 300px;
background-color: pink;
}
p {
width: 300px;
height: 200px;
background-color: lightsteelblue;
}
span {
font-size: 22px;
background-color: darkslategray;
color: #FFF;
}
</style>
</head>
<body>
<h2>DOM 操作</h2>
<div>
<p><span>Today is Sunday</span></p>
</div>
</body>
</html>
<script type="text/javascript">
var sp = document.getElementsByTagName("span")[0];
var pt = document.getElementsByTagName("p")[0];
var dv = document.getElementsByTagName("div")[0];
sp.addEventListener("click", function(event) {
console.log("This is span tag");
event.stopPropagation();
});
pt.addEventListener("click", function(event) {
console.log("This is p tag");
event.stopPropagation();
});
dv.addEventListener("click", function(event) {
console.log("This is div tag");
event.stopPropagation();
});
</script>
阻止浏览器默认动作
在表单的 submit 按钮被点击时，有可能用户输入的信息不满足要求，如果继续提交表单，
那么页面会被跳转，到后台才发现信息不对，再弹回输入页面让用户重新输入。
这种情况在十年前简直就太常见了，如果你想有更好的用户体验，那么就在表单提交前就验证信息是否正确吧。
这里我们就可以实现如果用户输入信息错误，那么阻止浏览器默认的提交动作并让用户重新输入。
同样，主流浏览器和IE6/IE7/IE8有不同区别，主流浏览器使用 event.preventDefault();，IE6/IE7/IE8 使用 event.returnValue = false;
我们也可以直接返回一个 false 告诉浏览器提交失败了，但这只在 dom 一级事件响应函数中有效，dom 二级只能通过上面的函数实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>js lesson</title>
</head>
<body>
<h2>事件对象</h2>
<form action="/register.php">
<input type="text">
<input id="submit" type="submit">
</form>
</body>
</html>
<script type="text/javascript">
var form = document.getElementsByTagName("form")[0];
/*----------- dom 一级方式阻止默认动作 -----------*/
// form.onsubmit = function() {
// console.log("提交被阻止了。")
// return false;
// }
/*----------- dom 二级方式阻止默认动作 -----------*/
/* IE6/IE7/IE8*/
// form.attachEvent("onsubmit", function(event) {
// console.log("提交被阻止了。")
// event.returnValue = false;
// });
/* 主流浏览器 */
form.addEventListener("submit", function(event) {
console.log("提交被阻止了。")
event.preventDefault();
});
</script>