实现一个跨浏览器事件工具

243 阅读1分钟

要实现一个跨浏览器事件工具,需要考虑浏览器之间的差异以及提供简单易用的 API。下面是一个可能的实现:

var EventUtil = {
  // 添加事件处理程序
  addHandler: 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;
    }
  },

  // 移除事件处理程序
  removeHandler: 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;
    }
  },

  // 获取事件对象
  getEvent: function(event) {
    return event ? event : window.event;
  },

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

  // 阻止事件默认行为
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },

  // 停止事件传播
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  }
};

上面的代码包含了五个方法,分别是 addHandlerremoveHandlergetEventgetTargetpreventDefaultstopPropagation。这些方法提供了一种简单的方式来跨浏览器处理事件。可以使用 addHandlerremoveHandler 来添加和删除事件处理程序,使用 getEvent 来获取事件对象,使用 getTarget 来获取事件目标,使用 preventDefaultstopPropagation 来阻止事件的默认行为和停止事件传播。