javascript 跨浏览器的事件系统

从技术上讲，javascript并没有提供内置的系统来实现这个非常重要的事件驱动编程，不过得益于浏览器的DOM 事件模型，这缺点并没有过多地暴露出来。但实质上javascript之父也不能主宰这一切，他支持的网景也没有强大到让竞争对手乖乖地使用它的产品，微软搞了一个JScript，死去的Macromedia 搞了一个ActionScript，还有更多，听说这个分支挺复杂的。但借用浏览器内置的DOM事件模型，第一个后果是，想使用它就必须借助某个DOM对象，window，document或元素节点，第二个后果是由于每个浏览器对DOM的支持不一，不能确保事件模型的一致，第三个是由于基于DOM对象，很容易造成循环引用。微软打赢第一次浏览器战争后，就基本没有更新其DOM模型了，与不断更新向w3c，ecma等标准靠近的“标准浏览器”分成两大阵营。但标准浏览器内也不是磐石一块，如FF就不支持mousewheel而是DOMMouseScroll，opera的contextmenu 是不可控的。我们需要自己实现一下。眼下，双主都实现DOM2的事件模型，微软的是attachEvent为首，标准的是addeventListener，允许同一个元素可以绑定多个同类型的事件回调函数。网上许多addEvent函数都是用它们做成的，但也不可靠，首先，IE的回调函数没有强制绑定事件对象，而标准浏览器是强舞曲第一个参数即为事件对象，尽管我们可以用call函数实现强制绑定，但IE的事件对象与标准的也不一样，这里有许多工作要做。另一个，就是回调函数的执行顺序问题，IE是无规则的，标准是按绑定的先后顺序执行。因此，这两个函数也被否定。我打算用最原始的onXXXX来实现，绑定多个函数时，就把它们放入一个函数中，一个for循环搞定。

var dom = {};
Array.prototype.indexOf =  function (el, index) {
  var n = this.length>>>0,
  i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index;
  for (; i < n; i++)
    if (i in this && this[i] === el) return i;
  return -1;
};
//http://msdn.microsoft.com/zh-cn/library/bb383786.aspx
//移除 Array 对象中某个元素的第一个匹配项。
Array.prototype.remove= function (item) {
  var index = this.indexOf(item);
  if (index !== -1) return this.removeAt(index);
  return null;
};
//移除 Array 对象中指定位置的元素。
Array.prototype.removeAt= function (index) {
  return this.splice(index, 1)
};
dom.attachEvent = function(el, type, handler) {
  // 在每个元素上设置一个Object类型的私定义属性events
  if (!el.events) el.events = {};
  // 这个对象有许多键为事件类型，值为函数数组的属性
  var handlers = el.events[type];
  if (!handlers) {
    handlers = el.events[type] = [];
    // 如果它原来就以onXXXX方式绑定了某事件，那么把它置为事件数组的第一个元素
    if (el["on" + type]) {
      handlers[0] = el["on" + type];
    }
  }
  //添加回调函数
  handlers.push(handler)
  //以onXXXX方式绑定我们的处理函数
  el["on" + type] = dom.handleEvent;
};
 
dom.detachEvent = function(el, type, handler) {
  if (el.events && el.events[type]) {
    el.events[type].remove(handler)
  }
}
dom.handleEvent = function (event) {
  var returnValue = true;
  // grab the event object (IE uses a global event object)
  event = event || fixEvent(window.event);
  // get a reference to the hash table of event handlers
  var handlers = this.events[event.type];
  // execute each event handler
  for(var i=0,n=handlers.length;i<n;i++){
    if (handlers[i](event) === false) {
      returnValue = false;
    }
  }
  return returnValue;
};
function fixEvent(event) {
  // add W3C standard event methods
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
};
fixEvent.preventDefault = function() {
  this.returnValue = false;
};
fixEvent.stopPropagation = function() {
  this.cancelBubble = true;
};
var $ = function(id){
  return document.getElementById(id)
}
window.onload = function(){
  var a = function(e){
    $("p").innerHTML = e.clientX +"  "+e.clientY
  }
  dom.attachEvent($("target"),"mousemove",a);
  setTimeout(function(){
    dom.detachEvent($("target"),"mousemove",a);
  },10*1000)
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>Event系统 by 司徒正美</title>
    <style type="text/css">
      #target{
        width:400px;
        height:100px;
        background:blue;
      }
    </style>
    <script type="text/javascript">
      var dom = {};
      Array.prototype.indexOf =  function (el, index) {
        var n = this.length>>>0,
        i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index;
        for (; i < n; i++)
          if (i in this && this[i] === el) return i;
        return -1;
      };
      //http://msdn.microsoft.com/zh-cn/library/bb383786.aspx
      //移除 Array 对象中某个元素的第一个匹配项。
      Array.prototype.remove= function (item) {
        var index = this.indexOf(item);
        if (index !== -1) return this.removeAt(index);
        return null;
      };
      //移除 Array 对象中指定位置的元素。
      Array.prototype.removeAt= function (index) {
        return this.splice(index, 1)
      };
      dom.attachEvent = function(el, type, handler) {
        // 在每个元素上设置一个Object类型的私定义属性events
        if (!el.events) el.events = {};
        // 这个对象有许多键为事件类型，值为函数数组的属性
        var handlers = el.events[type];
        if (!handlers) {
          handlers = el.events[type] = [];
          // 如果它原来就以onXXXX方式绑定了某事件，那么把它置为事件数组的第一个元素
          if (el["on" + type]) {
            handlers[0] = el["on" + type];
          }
        }
        //添加回调函数
        handlers.push(handler)
        //以onXXXX方式绑定我们的处理函数
        el["on" + type] = dom.handleEvent;
      };

dom.detachEvent = function(el, type, handler) {
        if (el.events && el.events[type]) {
          el.events[type].remove(handler)
        }
      }
      dom.handleEvent = function (event) {
        var returnValue = true;
        // grab the event object (IE uses a global event object)
        event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
        // get a reference to the hash table of event handlers
        var handlers = this.events[event.type];
        // execute each event handler
        for(var i=0,n=handlers.length;i<n;i++){
          if (handlers[i](event) === false) {
            returnValue = false;
          }
        }
        return returnValue;
      };
      function fixEvent(event) {
        // add W3C standard event methods
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
      };
      fixEvent.preventDefault = function() {
        this.returnValue = false;
      };
      fixEvent.stopPropagation = function() {
        this.cancelBubble = true;
      };
      var $ = function(id){
        return document.getElementById(id)
      }
      window.onload = function(){
        var a = function(e){
          $("p").innerHTML = e.clientX +"  "+e.clientY
        }
        dom.attachEvent($("target"),"mousemove",a);
        setTimeout(function(){
          dom.detachEvent($("target"),"mousemove",a);
        },10*1000)
      }
     
    </script>
  </head>
  <body>
    <div id="target">

</div>
    <p id="p"></p>
  </body>
</html>

我们回顾一下上面的流程，这个事件系统其实是Dean大神的addEvent的一个改版。

设置一个作为命名空间的对象。
对Array做一些扩展。
attachEvent 函数用于绑定事件。具体做法在需要绑定事件的对象设置一个events属性，里面再按事件类型放置回调函数，由于有时我们可能在同一个元素上绑定2个或多个onclick事件什么的，因此它们必须是一个数组。最后用DOM0的原始方法添加一个onXXXX属性。
detachEvent 函数用于卸载事件，就是把events上对应类型的数组元素去掉。
handleEvent 执行回调函数。我们以onXXXX的形式绑定了一个全局的函数，它的作用是获得与修正事件对象，然后取得此事件类型对应的所有回调函数，然后依次把事件对象作为它们的第一个参数再执行它们。最后是处理一下冒泡。
fixEvent 修正事件对象。基本上就是让IE拥有标准浏览器的两个方法。

对于一般应用，它已够用了。但如果追求完全。我们还有许多东西都要用。首先把events这个庞大的对象放到元素上是非常不妥的，不利于集中管理。二，fixEvent并不彻底，如target，pageX/Y等标准浏览器下的属性，在IE中还是用不了。

首先是handleEvent 函数，现在是无论标准浏览器还是IE的事件对象都要修正，还在每次调用时为IE修正其currentTarget 值。

dom.handleEvent = function (event) {
   event =  event || window.event
   event = dom.fixEvent(event);
   event.currentTarget = this;//修正currentTarget
   var returnValue = true;
   var handlers = this.events[event.type];
   for(var i=0,n=handlers.length;i<n;i++){
     if (handlers[i](event) === false) {
       returnValue = false;
     }
   }
   return returnValue;
 };   

在我们介绍的新版fixEvent函数时，我们先隆重介绍我从jQuery剽窃过来的伪事件对象。

dom.oneObject = function(arr,val){
  var result = {},value = val !== undefined ? val :1;
  for(var i=0,n=arr.length;i<n;i++)
    result[arr[i]] = value;
  return result;
};
dom.mixin = function(result, source) {
  if (arguments.length === 1) {
    source = result;
    result = dom;
  }
  if (result && source ){
    for(var key in source)
      source.hasOwnProperty(key) && (result[key] = source[key]);
  }
  if(arguments.length > 2 ){
    var others = [].slice.call(arguments,2);
    for(var i=0,n=others.length;i<n;i++){
      result = arguments.callee(result,others[i]);
    }
  }
  return result;
}
 
var MouseEventOne = dom.oneObject(["click","dblclick","mousedown",
  "mousemove","mouseout", "mouseover","mouseup"],"[object MouseEvent]");
var HTMLEventOne = dom.oneObject(["abort","blur","change","error","focus",
  "load","reset","resize","scroll","select","submit","unload"],"[object Event]");
var KeyboardEventOne = dom.oneObject(["keyup","keydown","keypress",],
"[object KeyboardEvent]");
var EventMap = dom.mixin({},MouseEventOne,HTMLEventOne,KeyboardEventOne)
 
var fn = "prototype";
dom.Event = function( src ) {
  if ( !this.preventDefault ) {
    return new dom.Event[fn].init( src );
  }
};
 
function returnFalse() {
  return false;
}
function returnTrue() {
  return true;
}
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
dom.Event[fn] = {
  init:function(src){
    //如果传入的是事件对象
    if ( src && src.type ) {
      this.originalEvent = src;
      this.type = src.type;
      //如果传入的是事件类型
    } else {
      this.type = src;
    }
    this.timeStamp = new Date().valueOf();
    this[ "expando" ] = true;
  },
  //http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Conformance
  toString:function(){
    return EventMap[this.type] || "[object Event]"
  },
  preventDefault: function() {
    this.isDefaultPrevented = returnTrue;
    var e = this.originalEvent;
    if ( !e ) {
      return;
    }
    // 如果存在preventDefault 那么就调用它
    if ( e.preventDefault ) {
      e.preventDefault();
    }
    // 如果存在returnValue 那么就将它设为false
    e.returnValue = false;
  },
  stopPropagation: function() {
    this.isPropagationStopped = returnTrue;
    var e = this.originalEvent;
    if ( !e ) {
      return;
    }
    // 如果存在preventDefault 那么就调用它
    if ( e.stopPropagation ) {
      e.stopPropagation();
    }
    // 如果存在returnValue 那么就将它设为true
    e.cancelBubble = true;
  },
  stopImmediatePropagation: function() {
    this.isImmediatePropagationStopped = returnTrue;
    this.stopPropagation();
  },
  isDefaultPrevented: returnFalse,
  isPropagationStopped: returnFalse,
  isImmediatePropagationStopped: returnFalse
};
dom.Event[fn].init[fn] = dom.Event[fn];

这个构造函数只实现了W3C事件模型的少许方法，那些属性去了哪？不急，我们在fixEvent方法中通过拷贝方式实现它们。为了区别原生事件对象与伪事件对象，我们在它上面添加了一个expando属性。

var buttonMap = {
  1:1,
  4:2,
  2:3
}
dom.fixEvent = function(event){
  if ( event[ "expando" ] ) {
    return event;
  }
  var originalEvent =  event 
  event = dom.Event(originalEvent);
  for(var prop in originalEvent){
    if(typeof originalEvent[prop] !== "function"){
      event[prop] = originalEvent[prop]
    }   
  }
  //如果不存在target属性，为它添加一个
  if ( !event.target ) {
    event.target = event.srcElement || document;
  }
  //如果事件源对象为文本节点，则置入其父元素
  if ( event.target.nodeType === 3 ) {
    event.target = event.target.parentNode;
  }
  //如果不存在relatedTarget属性，为它添加一个
  if ( !event.relatedTarget && event.fromElement ) {
    event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
  }
 
  //如果不存在pageX/Y则结合clientX/Y做一双出来
  if ( event.pageX == null && event.clientX != null ) {
    var doc = document.documentElement, body = document.body;
    event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
    event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
  }
 
  // 为键盘事件添加which事件
  if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
    event.which = event.charCode || event.keyCode;
  }
 
  // Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
  if ( !event.metaKey && event.ctrlKey ) {
    event.metaKey = event.ctrlKey;
  }
 
  // 判定鼠标事件按下的是哪个键，1 === left; 2 === middle; 3 === right
 
  if ( !event.which && event.button !== undefined ) {
    event.which = buttonMap[event.button]
  }
  return event;
}

毫不犹豫地抄jQuery的方法，因为在所有类库中，jQuery的方法是最好提取的。

现在我们基本解决了文章中段提出的两个问题中的其中一个。要解决第一个我们就需要引入缓存系统了。这个留在下一部分讲。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>Event by 司徒正美</title>
    <style type="text/css">
      #target{
        width:400px;
        height:100px;
        background:blue;
      }
    </style>
    <script type="text/javascript">
      var dom = {};
      Array.prototype.indexOf =  function (el, index) {
        var n = this.length>>>0,
        i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index;
        for (; i < n; i++)
          if (i in this && this[i] === el) return i;
        return -1;
      };
      //http://msdn.microsoft.com/zh-cn/library/bb383786.aspx
      //移除 Array 对象中某个元素的第一个匹配项。
      Array.prototype.remove= function (item) {
        var index = this.indexOf(item);
        if (index !== -1) return this.removeAt(index);
        return null;
      };
      //移除 Array 对象中指定位置的元素。
      Array.prototype.removeAt= function (index) {
        return this.splice(index, 1)
      };
      dom.attachEvent = function(el, type, handler) {
        // 在每个元素上设置一个Object类型的私定义属性events
        if (!el.events) el.events = {};
        // 这个对象有许多键为事件类型，值为函数数组的属性
        var handlers = el.events[type];
        if (!handlers) {
          handlers = el.events[type] = [];
          // 如果它原来就以onXXXX方式绑定了某事件，那么把它置为事件数组的第一个元素
          if (el["on" + type]) {
            handlers[0] = el["on" + type];
          }
        }
        //添加回调函数
        handlers.push(handler)
        //以onXXXX方式绑定我们的处理函数
        el["on" + type] = dom.handleEvent;
      };

dom.detachEvent = function(el, type, handler) {
        if (el.events && el.events[type]) {
          el.events[type].remove(handler)
        }
      }
      dom.handleEvent = function (event) {
        event =  event || window.event
        event = dom.fixEvent(event);
        event.currentTarget = this;//修正currentTarget
        var returnValue = true;
        var handlers = this.events[event.type];
        for(var i=0,n=handlers.length;i<n;i++){
          if (handlers[i](event) === false) {
            returnValue = false;
          }
        }
        return returnValue;
      };
      var buttonMap = {
        1:1,
        4:2,
        2:3
      }
      dom.fixEvent = function(event){
        if ( event[ "expando" ] ) {
          return event;
        }
        var originalEvent =  event 
        event = dom.Event(originalEvent);
        for(var prop in originalEvent){
          if(typeof originalEvent[prop] !== "function"){
            event[prop] = originalEvent[prop]
          }   
        }
        //如果不存在target属性，为它添加一个
        if ( !event.target ) {
          event.target = event.srcElement || document;
        }
        //如果事件源对象为文本节点，则置入其父元素
        if ( event.target.nodeType === 3 ) {
          event.target = event.target.parentNode;
        }
        //如果不存在relatedTarget属性，为它添加一个
        if ( !event.relatedTarget && event.fromElement ) {
          event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
        }

//如果不存在pageX/Y则结合clientX/Y做一双出来
        if ( event.pageX == null && event.clientX != null ) {
          var doc = document.documentElement, body = document.body;
          event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
          event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
        }

// 为键盘事件添加which事件
        if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) {
          event.which = event.charCode || event.keyCode;
        }

// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs)
        if ( !event.metaKey && event.ctrlKey ) {
          event.metaKey = event.ctrlKey;
        }
 
        // 判定鼠标事件按下的是哪个键，1 === left; 2 === middle; 3 === right
        
        if ( !event.which && event.button !== undefined ) {
          event.which = buttonMap[event.button]
        }
        return event;
      }

dom.oneObject = function(arr,val){
        var result = {},value = val !== undefined ? val :1;
        for(var i=0,n=arr.length;i<n;i++)
          result[arr[i]] = value;
        return result;
      };
      dom.mixin = function(result, source) {
        if (arguments.length === 1) {
          source = result;
          result = dom;
        }
        if (result && source ){
          for(var key in source)
            source.hasOwnProperty(key) && (result[key] = source[key]);
        }
        if(arguments.length > 2 ){
          var others = [].slice.call(arguments,2);
          for(var i=0,n=others.length;i<n;i++){
            result = arguments.callee(result,others[i]);
          }
        }
        return result;
      }

var MouseEventOne = dom.oneObject(["click","dblclick","mousedown",
        "mousemove","mouseout", "mouseover","mouseup"],"[object MouseEvent]");
      var HTMLEventOne = dom.oneObject(["abort","blur","change","error","focus",
        "load","reset","resize","scroll","select","submit","unload"],"[object Event]");
      var KeyboardEventOne = dom.oneObject(["keyup","keydown","keypress",],
      "[object KeyboardEvent]");
      var EventMap = dom.mixin({},MouseEventOne,HTMLEventOne,KeyboardEventOne)

var fn = "prototype";
      dom.Event = function( src ) {
        if ( !this.preventDefault ) {
          return new dom.Event[fn].init( src );
        }
      };

</div>
    <p id="p">显示鼠标位置</p>
    <h1>请按下键盘的键</h1>
  </body>
</html>