事件绑定

什么是事件绑定？

在同一事件添加两次事件

 

事件绑定的作用是什么？

不用事件绑定，在同一事件上添加多次，会被覆盖。而用事件绑定不会

举个栗子：

<script>
    window.onload = function () {
      var oBtn = document.getElementById('btn');

      oBtn.onclick =function () {
        alert("a");
      };

      oBtn.onclick =function () {
        alert("b");
      };

    };

  </script>

运行结果： 只弹出  b

添加事件绑定：

 oBtn.attachEvent('onclick', function () {
        alert("a");
      });
      oBtn.attachEvent('onclick', function () {
        alert("b");
      });

运行结果是 弹出 b, 再弹出 c。 跟绑定的顺序相反

---

 

attachEvent 只兼容IE78，FF、chrome不兼容

在FF、chrome中用：addEventListener(事件名， 函数， false)，但在IE中不兼容

oBtn.addEventListener('click', function () {
        alert("a");
      },false);

      oBtn.addEventListener('click', function () {
        alert("b");
      }, false);

【注意】：click没带on

 

兼容

用if（一般兼容性问题都用if语句来解决） 

避免代码冗余，可封装一个兼容方法

function myAddEvent(obj, ev, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on'+ev, fn);
      }
      else {
        obj.addEventListener(ev, fn, false);
      }
    }