本篇开始将回顾下Javascript的事件机制。同时会从一个最小的函数开始写到最后一个具有完整功能的，强大的事件模块。为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件handler。

　　先看看页面中添加事件的几种方式：

　　1，直接将JS代码写在HTML上

<div onclick="alert(4);">Div1 Element</div>
　　上一篇我们封装了一个addEvent：
　　1，解决了IE6/7/8下事件handler中this为window的错误。
　　2，并且统一了事件对象作为事件handler的第一个参数传入。
　　这篇把对应的删除事件的函数补上。上一篇中fn在IE6/7/8中实际上被包装了，IE6/7/8中真正的handler是el["e"+fn]。因此删除时要用到它。同时将两个方法挂在一个对象E上，add，remove分别添加和删除事件。
E = {
    //添加事件
    add : function(el, type, fn){
        if(el.addEventListener){
            el.addEventListener(type, fn, false);
        }else{
            el['e'+fn] = function(){
                fn.call(el,evt);
            }; 
            el.attachEvent('on' + type, el['e'+fn]);
        }
    },
    //删除事件
    remove : function(el, type, fn){
        if(el.removeEventListener){
            el.removeEventListener(type, fn, false);
        }else if(el.detachEvent){
            el.detachEvent('on' + type, el['e'+fn]);
        }
    }  
};
　　上一篇中的add有个问题，对同一类型事件添加多个hanlder时，IE6/7/8下会无序，如：
<div id="d1" style="width:200px;height:200px;background:gold;"></div>
<script type="text/Javascript">
    var el = document.getElementById('d1');
    function handler1(){alert('1');}
    function handler2(){alert('2');}
    function handler3(){alert('3');}
    function handler4(){alert('4');}
    function handler5(){alert('5');}
    E.add(el, 'click', handler1);
    E.add(el, 'click', handler2);
    E.add(el, 'click', handler3);
    E.add(el, 'click', handler4);
    E.add(el, 'click', handler5);
</script> 
　　上一篇解决了IE6/7/8中同一个类型事件的多个handler执行无序的情况，为此改动也是较大的。实现几乎与前一个版本完全不同。但好处也是明显的。
　　有时需要添加只执行一次的事件handler，为此给add方法添加第四个参数one，one为true则该事件handler只执行一次。
<div id="d1" style="width:200px;height:200px;background:gold;"></div>
<script>
var el = document.getElementById('d1');
function handler(){alert(5)}
E.add(el, 'click', handler, true);
</script>
　　上一篇正式推出了我的事件模块event_v1，已经搭起了它的初始框架。或许有人要说，与众多JS库或框架相比，它还没有解决事件对象的兼容性问题。是的，我故意将此放到后续补充。因为事件对象的兼容性问题太多了，太繁琐了。
　　这篇我将引入一个私有的_fixEvent函数，add中将调用该函数。_fixEvent将修复（或称包装）原生事件对象，返回一个标准的统一接口的事件对象。如下：
function _fixEvent( evt, el ) {
    var props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
        len   = props.length;
    function now() {return (new Date).getTime();}
    function returnFalse() {return false;}
    function returnTrue() {return true;}
    function Event( src ) {
        this.originalEvent = src;
        this.type = src.type;
        this.timeStamp = now();
    }
    Event.prototype = {
        preventDefault: function() {
            this.isDefaultPrevented = returnTrue;
            var e = this.originalEvent;
            if( e.preventDefault ) {
                e.preventDefault();
            }
            e.returnValue = false;
        },
        stopPropagation: function() {
            this.isPropagationStopped = returnTrue;
            var e = this.originalEvent;
            if( e.stopPropagation ) {
                e.stopPropagation();
            }     
            e.cancelBubble = true;
        },
        stopImmediatePropagation: function() {
            this.isImmediatePropagationStopped = returnTrue;
            this.stopPropagation();
        },
        isDefaultPrevented: returnFalse,
        isPropagationStopped: returnFalse,
        isImmediatePropagationStopped: returnFalse
    };
 
    var originalEvent = evt;
    evt = new Event( originalEvent );
    
    for(var i = len, prop; i;) {
        prop = props[ --i ];
        evt[ prop ] = originalEvent[ prop ];
    }
    if(!evt.target) {
        evt.target = evt.srcElement || document;
    }
    if( evt.target.nodeType === 3 ) {
        evt.target = evt.target.parentNode;
    }
    if( !evt.relatedTarget && evt.fromElement ) {
        evt.relatedTarget = evt.fromElement === evt.target ? evt.toElement : evt.fromElement;
    }
    if( evt.pageX == null && evt.clientX != null ) {
        var doc = document.documentElement, body = document.body;
        evt.pageX = evt.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
        evt.pageY = evt.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
    }
    if( !evt.which && ((evt.charCode || evt.charCode === 0) ? evt.charCode : evt.keyCode) ) {
        evt.which = evt.charCode || evt.keyCode;
    }
    if( !evt.metaKey && evt.ctrlKey ) {
        evt.metaKey = evt.ctrlKey;
    }
    if( !evt.which && evt.button !== undefined ) {
        evt.which = (evt.button & 1 ? 1 : ( evt.button & 2 ? 3 : ( evt.button & 4 ? 2 : 0 ) ));
    }     
    if(!evt.currentTarget) evt.currentTarget = el;
 
    return evt;
}          

        

        
        
      
        
it知识库：事件模块的演变，转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。