js通用事件监听器函数及简介（补充EventUtil）

前言

haorooms前端博客，保持了7年百度首页搜索前端博客第一，最近搜索发现博客排名不见了。并没有做什么网站改版之类的。也没有什么SEO的作弊行为。难道是因为近期网站没有更新吗？好吧，那么最近来频繁更新一波，提升一下百度的排名。

自定义js监听器

之前文章写过 封装常用的跨浏览器的事件对象EventUtil，一般的浏览器事件都有封装，今天简单补充一些。

封装一个绑定事件

export function BindEvent(ele, eventName, fn) { //EventUtil 请看前面文章
  EventUtil.removeHandler(ele, eventName, fn)
  EventUtil.addHandler(ele, eventName, fn)
}

这样的好处是每次绑定事件之前，把前面已经绑定的事件清理掉了。

另外补充2个event

MyEvent = {
  // 页面加载完成后
  readyEvent: function (fn) {
    if (fn == null) {
      fn = document;
    }
    var oldOnload = window.onload;
    if (typeof window.onload != "function") {
      window.onload = fn;
    } else {
      window.onload = function () {
        oldOnload();
        fn();
      };
    }
  },
  // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
  getEvent: function (e) {
    var ev = e || window.event;
    if (!ev) {
      var c = this.getEvent.caller;
      while (c) {
        ev = c.arguments[0];
        if (ev && Event == ev.constructor) {
          break;
        }
        c = c.caller;
      }
    }
    return ev;
  },
};

补充，老版本IE事件和w3c事件处理区别

1、绑定事件：

//w3c:
dom.addEventListener('click',hander,false)
//IE：
dom.attachEvent('onclick',hander)

2、 删除事件

//w3c:
dom.removeEventListener('click',hander,false)
//IE：
dom.detachEvent('onclick',hander)

3、事件目标

    //w3c:
    e.target
    //IE：
   e.srcElement

4、阻止默认行为

//w3c
e.preventDefault()
//ie
e.returnValue = false

5、阻止事件传播

// w3c
e.stopPropagation()
// ie
e.cancelBubble = true

注：IE仅支持冒泡，不支持捕获

w3c事件的target和currentTarget有哪些区别？

1、target只会出现在事件流的目标阶段，currentTarget可能出现在事件流的任何阶段

2、事件流处于目标阶段的事件，二者的指向是相同的。

3、当事件流处于捕获或者冒泡阶段的时候，currentTarget指向当前活动的对象（一般为父级）