JS事件绑定的几种形式

事件绑定是给标签绑定上事件，比如绑定鼠标点击事件，绑定键盘按下事件等。
事件绑定分为三种：行内绑定、动态绑定、事件监听绑定

1.行内绑定
顾名思义，行内绑定是在标签的属性上进行绑定。这种方式简单，但不便于后期维护。

  <div onclick="click_It">点我试试</div>
  <script>
    function click_It(){
      alert("你敢点我？")
      console.log("再点我试试！")
    }
  </script>

2.动态绑定
动态绑定是DOM对象.事件 = 事件函数

  <div id="box">别点我了</div>
  <script>
    var box = document.getElementById("box");
    box.onclick = function(){
      alert("别点了")
    }
  </script>

3.事件监听绑定
采用 addEventListener() 方法为单击事件赋予相关的监听器，行内绑定和动态绑定都只能触发一次绑定效果，而且触发的是最后绑定的那个事件，而事件监听绑定可以触发多次。
addEventListener(事件名称,事件处理函数,是否捕获) 一般默认不捕获，即冒泡

    <div id="box" >点吧点吧</div>
<script>
    var Box = document.getElementById("box")
    Box.addEventListener("click", function(){
      alert(this.id)   //弹出box
    }, false)
    Box.addEventListener("click", function(){
      alert("hello")  //弹出hello
    }, false)
  
    //在点击div后 会先弹出 box ，再弹出 hello
</script>

但是事件监听函数有兼容性问题，所以我们要进行兼容性处理，来封装一个兼容监听函数

/**
*@param{*} obj 要绑定的标签对象
*@param{*} type 触发事件 不需要on 比如onclick 去掉on 变为click， onkeydown 变为 keydown 
*@param{*} fn 事件监听函数，触发后需要执行的方法
**/
function(obj, type, fn){
    //兼容Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
    if(obj.addEventListener){
      obj.addEventListener(obj,  type, fn)
    } else if(obj.addachEvent){
      //兼容IE8.0及其以下版本ie6、7、8
      obj.addachEvent(obj,  type, fn)
    } else{
      //直接绑定函数
      obj["on" + type] = fn
    }
}