借用传智播客教师课件中得一句话，“通过鼠标、键盘对浏览器页面所做的动作就是事件”，比如鼠标点击、鼠标移入、鼠标移除、键盘按下、键盘抬起等等，都称之为事件，这些事件有如下几种。
事件的类型
| 事件 | 作用 |
|---|---|
| onclick | 鼠标点击 |
| onmouseover | 鼠标移入 |
| onmouseout | 鼠标移出 |
| onkeyup | 键盘按下并抬起 |
| onkeydown | 键盘按下 |
| onchange | 内容发生改变 |
| onblur | 失去焦点 |
| onfocus | 获得焦点 |
| onsubmit | 表单提交 |
事件的绑定
事件的绑定有多种方式，不过大体都可以分为两大类，一种是在元素写内联代码（DOM一级），一种则是使用绑定事件函数来对某个元素进行事件绑定（DOM二级）。我们主要介绍后面一种，涉及到的主要两个方法一个是添加 addEventListener 另外一个是删除 removeEventListener
另外值得注意的是，微软 IE6/IE7/IE8 浏览器添加事件的函数于主流浏览器并不太一样，如果是 IE6/IE7/IE8 则使用 attachEvent 和 detachEvent
参考代码
<!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>
h2 {
height: 40px;
width: auto;
background-color: #017ACC;
color: #FFFFFF;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<h2>DOM 操作</h2>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-primary" onclick="cancel()">取消事件绑定</button>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var hh = document.getElementsByTagName("h2")[0];
// 给 h2 添加事件
hh.addEventListener("mouseover", function() {
// this 代表 DOM 对象本身
this.style.backgroundColor = "#CCCCCC";
});
hh.addEventListener("mouseout", function() {
// this 代表 DOM 对象本身
this.style.backgroundColor = "#017ACC";
});
function clickFunc1() {
console.log("clieckFunc1");
};
function clickFunc2() {
console.log("clieckFunc2");
};
function clickFunc3() {
console.log("clieckFunc3");
};
// 添加鼠标点击事件，支持一个DOM元素绑定多个相同事件，触发时三个事件同时响应
hh.addEventListener("click", clickFunc1);
hh.addEventListener("click", clickFunc2);
hh.addEventListener("click", clickFunc3);
// 取消指定事件
function cancel() {
// 可取消的事件必须是有名函数为参数的事件，
hh.removeEventListener("click", clickFunc1);
hh.removeEventListener("click", clickFunc3);
}
</script>