JavaScript DOM 操作给元素添加、删除事件

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

事件的类型

事件 作用
onclick 鼠标点击
onmouseover 鼠标移入
onmouseout 鼠标移出
onkeyup 键盘按下并抬起
onkeydown 键盘按下
onchange 内容发生改变
onblur 失去焦点
onfocus 获得焦点
onsubmit 表单提交

事件的绑定

事件的绑定有多种方式,不过大体都可以分为两大类,一种是在元素写内联代码(DOM一级),一种则是使用绑定事件函数来对某个元素进行事件绑定(DOM二级)。我们主要介绍后面一种,涉及到的主要两个方法一个是添加 addEventListener 另外一个是删除 removeEventListener

另外值得注意的是,微软 IE6/IE7/IE8 浏览器添加事件的函数于主流浏览器并不太一样,如果是 IE6/IE7/IE8 则使用 attachEventdetachEvent

参考代码

<!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>

说说你的想法