js框架开发之旅--事件三-优快云博客

本文介绍了一个兼容W3C和微软标准的事件处理框架的设计与实现，包括如何阻止默认事件及事件传播，并讨论了不同浏览器间的差异处理。

停止事件

我们点击一个元素，会触发它的默认事件，同时事件还会传播给他的父元素。
Prototype使用Event.stop()方法阻止默认事件和事件的传播。
jQuery遵循W3C的标准，给事件提供了更多的接口：

event.preventDefault():阻止事件目标的默认事件触发。
event.stopPropagation(): 阻止事件在DOM树上传播。
event.stopImmediatePropagation(): 阻止当前元素的后续事件触发，同时阻止事件在DOM树上传播。

我们的接口设计

我们打算给事件对象继承下面的方法：

event.stop() – 阻止默认事件和事件传播
event.preventDefault() – 阻止默认事件
event.stopPropagation() – 阻止事件传播

实现

我创建了一个私有的函数继承和修复事件对象，主要是修复IE的差异：

function stop(event) {
  event.preventDefault(event);
  event.stopPropagation(event);
}

function fix(event, element) {
  if (!event) var event = window.event;

  event.stop = function() { stop(event); };

  if (typeof event.target === 'undefined')
    event.target = event.srcElement || element;

  if (!event.preventDefault)
    event.preventDefault = function() { event.returnValue = false; };

  if (!event.stopPropagation)
    event.stopPropagation = function() { event.cancelBubble = true; };

  return event;
}

其他浏览器差异

其他的浏览器差异主要体现在键盘和鼠标事件上，jQuery处理了下面的一些差异：

Safari对文本节点处理的不同
某些浏览器对pageX/Y的不支持
键盘事件对event.which和event.metaKey的支持不同
event.which对鼠标点击的按钮的序列的支持

Prototype处理方式类似：

var _isButton;
if (Prototype.Browser.IE) {
  // IE doesn't map left/right/middle the same way.
  var buttonMap = { 0: 1, 1: 4, 2: 2 };
  _isButton = function(event, code) {
    return event.button === buttonMap[code];
  };
} else if (Prototype.Browser.WebKit) {
  // In Safari we have to account for when the user holds down
  // the "meta" key.
  _isButton = function(event, code) {
    switch (code) {
      case 0: return event.which == 1 && !event.metaKey;
      case 1: return event.which == 1 && event.metaKey;
      default: return false;
    }
  };
} else {
  _isButton = function(event, code) {
    return event.which ? (event.which === code + 1) : (event.button === code);
  };
}