借用传智播客教师课件中得一句话，“通过鼠标、键盘对浏览器页面所做的动作就是事件”，比如鼠标点击、鼠标移入、鼠标移除、键盘按下、键盘抬起等等，都称之为事件，这些事件有如下几种。

事件的类型

事件

作用

onclick

鼠标点击

onmouseover

鼠标移入

onmouseout

鼠标移出

onkeyup

键盘按下并抬起

onkeydown

键盘按下

onchange

内容发生改变

onblur

失去焦点

onfocus

获得焦点

onsubmit

表单提交

事件的绑定

事件的绑定有多种方式，不过大体都可以分为两大类，一种是在元素写内联代码（DOM一级），一种则是使用绑定事件函数来对某个元素进行事件绑定（DOM二级）。我们主要介绍后面一种，涉及到的主要两个方法一个是添加 addEventListener 另外一个是删除 removeEventListener 另外值得注意的是，微软 IE6/IE7/IE8 浏览器添加事件的函数于主流浏览器并不太一样，如果是 IE6/IE7/IE8 则使用 attachEvent 和 detachEvent

参考代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>