事件侦听器

通用的事件侦听器函数

const EventUtils = {
  // 分别使用dom0||dom2||IE方式 来绑定事件
  // 添加事件
  addEvent: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },

  // 移除事件
  removeEvent: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },

  // 获取事件目标
  getTarget: function(event) {
    return event.target || event.srcElement;
  },

  // 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event
  getEvent: function(event) {
    return event || window.event;
  },

  // 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获）
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },

  // 取消事件的默认行为
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
};

// 客户区的坐标位置：clientX、clientY
// 页面的坐标位置：pageX、pageY
// 在页面没有滚动的情况下，pageX = clinetX;pageY = clientY
// IE8以前版本不支持页面的坐标位置，实现兼容性代码如下：
// document.body(混杂模式) || document.documentElement(标准模式)
event = EventUtils.getEvent(event);
var pageX = event.pageX;
var pageY = event.pageY;
if (pageX === undefined) {
    pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft)
}
if (pageY === undefined) {
    pageY = event.clientY + (document.body.scrollTop|| document.documentElement.scrollTop)
}