JavaScript 事件绑定浅谈

1.HTML绑定
  即把事件写在html标签的属性里面；属于DOM0级标准
  例：<div οnclick="myFunction()">点击</div>
      <script>
         function myFunction(){
            console.log('这是一个点击事件');
         }
      </script>
  特点：

  1）简单易懂，几乎所有的浏览器都支持；
  2）代码不简洁；效率不高；不符合行为结构样式相分离。

2.事件属性绑定事件函数
  例：<div id="myBtn">点击</div>
  <script>
        document.getElementById('myBtn').οnclick=function(){
            console.log('这是一个点击事件');
        }
  </script>

  特点：
  实现了行为结构样式相分离，便于操作当事对象，function 作为对象的 on××× 属性出现，函数里操作对象，直接用this就能引用当事对象，可方便读取事件对象。

3.addEventListener()方法
  语法：element.addEventListener(event, function, useCapture);
  event:事件，必须，如click；注意: 不要使用 "on" 前缀。
  function：事件触发是指定的函数，必须；事件对象会作为第一个参数传入函数，可以是匿名函数。
  useCapture:布尔值，可选，默认 false 事件句柄在冒泡阶段执行；true  事件句柄在捕获阶段执行；
  
  可添加多个事件，添加的事件不会覆盖已存在的事件
  如：  document.getElementById("myBtn").addEventListener("click", myFunction);
           document.getElementById("myBtn").addEventListener("click", someOtherFunction);
        
    添加多个不同类型事件
  如： document.getElementById("myBtn").addEventListener("mouseover", myFunction);
          document.getElementById("myBtn").addEventListener("click", someOtherFunction);
          document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);

  使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。
  
   IE8 及更早 IE 版本不支持该方法，可以用attachEvent()代替
   语法：element.attachEvent(event, function);
   event:事件，必须，如onclick；注意: 必须加 "on" 前缀。
    function：事件触发是指定的函数，必须；事件对象会作为第一个参数传入函数，可以是匿名函数。
    attachEvent()方法不支持捕获模型，
    detachEvent() 方法移除由attachEvent()方法添加的事件句柄。