事件处理程序分为：

  1. HTML事件处理
  2. DOM0级事件处理

  3. DOM2级事件处理

    HTML事件（几乎不用）

    优点：写起来方便
    缺点：JS和HTML不分离，各干各的事，不要后期耦合性太强

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.  <meta charset="UTF-8">
    5.  <title>Js事件详解--事件处理</title>
    6. </head>
    7. <body>
    8.  <div id="div">
    9.    <button id="btn1" onclick="demo()">按钮</button>
    10.  </div>
    11.  <script>
    12.    function demo(){
    13.      alert("hello html事件处理");
    14.    }
    15.  </script>
    16. </body>
    17. </html>

    DOM0级事件处理

    优点：JS和HTML做了分离
    缺点：事件会被覆盖，两个同名的事件，下面的会覆盖上面的
    （只适用于只有一个事件处理）

    1. <body>
    2.  <div id="div">
    3.      <button id="btn1">按钮</button>
    4.  </div>
    5.  <script>
    6.      var btn1=document.getElementById("btn1");
    7.      btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉
    8.      btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");}
    10.    //移除事件
    11.      btn1.onclick=null; //将事件消除
    12.  </script>
    13. </body>

    DOM2级事件处理

    优点：1、JS和HTML分离 2、事件不会被覆盖
    缺点：写起来复杂

    1. <body>
    2.  <div id="div">
    3.      <button id="btn1">按钮</button>
    4.  </div>
    5.  <script>
    6.      var btn1=document.getElementById("btn1");
    7.      btn1.addEventListener("click",demo1);
    8.      btn1.addEventListener("click",demo2);
    9.      btn1.addEventListener("click",demo3);
    10.      function demo1(){
    11.          alert("DOM2级事件处理程序1")
    12.      }
    13.      function demo2(){
    14.          alert("DOM2级事件处理程序2")
    15.      }
    16.      function demo3(){
    17.          alert("DOM2级事件处理程序3")
    18.      }
    20.    //移除事件
    21.      btn1.removeEventListener("click",demo2);
    22.  </script>
    23. </body>