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 指向当前活动的对象（一般为父级）