浏览器不支持attachEvent事件解决方案及跨浏览器的事件处理程序方法

浏览器在事件处理程序上，根据现有及过往浏览器类型，总共有5种形式：查看5种事件处理程序详情

1）HTML事件处理程序
2）DOM0 级事件处理程序
3）DOM2 级事件处理程序
4）IE事件处理程序
5）跨浏览器的事件处理程序

在我们使用IE事件处理程序时，我们会用到两个函数attachEvent()和detachEvent()；因为目前IE11已经不再支持前述的两个函数了，当我们使用attachEvent进行事件处理时，浏览器会报错。因此，浏览器不支持attachEvent事件的原因：

支持IE 事件处理程序的浏览器有IE 和Opera。且IE11已经不再支持attachEvent()和detachEvent()。

为解决浏览器不支持attachEvent事件的问题，最佳方式是采用跨浏览器的事件处理程序方法。

 <!-- 跨浏览器的事件处理程序 begin -->
  <div>
    <input id="expBtn" type="button" value="跨浏览器的事件处理程序">
  </div>
  <script>
    var EventUtil = {
      /*
       * 添加事件
       * @param: element 要操作的元素
       * @param: type 事件名称
       * @param: handler 事件处理程序函数
       */
      addHandler: function (element, type, handler) {
        if (element.addEventListener) {
          // DOM2 级事件处理程序
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
          // IE事件处理程序
          element.attachEvent("on" + type, handler);
        } else {
          element["on" + type] = handler;
        }
      },
      /*
       * 删除已添加事件
       * @param: element 要操作的元素
       * @param: type 事件名称
       * @param: handler 事件处理程序函数
       */
      removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
          // DOM2 级事件处理程序
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
          // IE事件处理程序
          element.detachEvent("on" + type, handler);
        } else {
          element["on" + type] = null;
        }
      }
    }
    var expbtn = document.getElementById('expBtn');
    var fun = function(){
      alert('clicked');
    }
    EventUtil.addHandler(expbtn, "click", fun);
    EventUtil.removeHandler(btn, "click", handler);
    // 备注：只支持DOM0 级的浏览器已经没有那么多了，所以未对DOM0进行处理
  </script>
  <!-- 跨浏览器的事件处理程序 end -->

采用跨浏览器的事件处理程序，即可跨浏览器进行事件处理程序的调用。