新浪微博focus和blur的事件代理的实现

废话不多说，咱就不解释什么叫事件，什么叫事件代理这类问题了。

通常来讲，事件代理都是通过事件冒泡来实现的，理由也很简单，IE8及其之前的IE版本，只支持事件冒泡，不捕获（目前IE9和IE10已经支持DOM标准事件）。对于绝大多数的事件来讲，通过冒泡来实现代理是没有什么问题的，但是，对于focus和blur事件，问题就出来了。

focus和blur事件是不支持事件冒泡的，因此，我们无法通过冒泡进行事件代理，这就使得我们必须为每一个input框、textarea框等都add一个focus和blur事件，有时候，这是让人很不爽的，比如说，微公益里个人求助中，每一步都有一个大表单需要填写，有很多的input和textarea，需求里肯定有这么一步：输入的合法性判断，有问题的，给个错误提示；后来又增加了一个需求：每个表单框给个友情提示……问题就这样出现了，咱们必须for一堆的表单框，每个都添加focus和blur事件，很是让人不爽的。

在微博RIA工作的都使用过STK.delegatedEvent()进行事件代理，这货也是通过事件冒泡实现的事件代理，咱就没法用这货进行focus和blur事件的代理了，怎么实现呢？

由于DOM标准当年没有提出一个解决方案，IE和Opera为了解决这问题，各自提出了一种方案，IE中使用focusin和focusout，Opera则使用DOMFocusIn和DOMFocusOut实现，它们都可以被冒泡。由于IE的比较像样，被W3C拿去当DOM3级事件标准了。

懒得写太多解释了，因为原理很简单，IE里把focus事件改为focusin，把blur事件改写成focusout，其他浏览器都使用捕获方式。直接看一下微博里修改后的delegatedEvent事件对象吧。

/**
 * 事件代理对象，主要是解决focus和blur的代理问题
 * 兼容core包下的delegatedEvent方法
 * 
 * @id STK.core.evt.delegatedEvent
 * @author Robin Young | yonglin@staff.sina.com.cn
 * @version 1.0
 * 
 * @modified @ZengWq572 | weiqun1@staff.sina.com.cn
 */
STK.register('kit.evt.delegatedEvent', function($){
    
    var checkContains = function(list,el){
        for(var i = 0, len = list.length; i < len; i += 1){
            if($.core.dom.contains(list[i],el)){
                return true;
            }
        }
        return false;
    };

    // 不使用STK包的addEvent方法，将DOM标准下的事件添加改为使用捕获方式
    var addEvent = function(node, type, handler) {
        node = $.E(node);
        if (node == null) {
            return false;
        }
        if (typeof handler !== "function") {
            return false;
        }
        if (node.addEventListener) {
            node.addEventListener(type, handler, true);
        } else if (node.attachEvent) {
            node.attachEvent('on' + type, handler);
        } else {
            node['on' + type] = handler;
        }
        return true;
    };

    var isIE = $.core.util.browser.IE;
    
    return function(actEl,expEls){
        if(!$.core.dom.isNode(actEl)){
            throw 'core.evt.delegatedEvent need an Element as first Parameter';
        }
        if(!expEls){
            expEls = [];
        }
        if($.core.arr.isArray(expEls)){
            expEls = [expEls];
        }
        var evtList = {};
        var bindEvent = function(e){
            var evt = $.core.evt.fixEvent(e);
            var el = evt.target;
            var type = e.type;
            doDelegated(el, type, evt);
        };
        
        var doDelegated = function(el, type, evt){
            var actionType = null;
            var changeTarget = function(){
                var path, lis, tg;
                path = el.getAttribute('action-target');
                if(path){
                    lis = $.core.dom.sizzle(path, actEl);
                    if(lis.length){
                        tg = evt.target = lis[0];
                    }
                };
                changeTarget = $.core.func.empty;
                return tg;
            };
            var checkBuble = function(){
                var tg = changeTarget() || el;
                if(evtList[type] && evtList[type][actionType]){
                    return evtList[type][actionType]({
                        'evt' : evt,
                        'el' : tg,
                        'box' : actEl,
                        'data' : $.core.json.queryToJson(tg.getAttribute('action-data') || '')
                    });
                }else{
                    return true;
                }
            };
            if(checkContains(expEls,el)){
                return false;
            }else if(!$.core.dom.contains(actEl, el)){
                return false;
            }else{
                while(el && el !== actEl){
                    if(el.nodeType === 1){
                        actionType = el.getAttribute('action-type');
                        if(actionType && checkBuble() === false){
                            break;
                        }
                    }
                    el = el.parentNode;
                }
                
            }
        };
        
        var that = {};
        /**
         * 添加代理事件
         * @method add
         * @param {String} funcName
         * @param {String} evtType
         * @param {Function} process
         * @return {void}
         */
        that.add = function(funcName, evtType, process){
            if(isIE && (evtType == 'focus' || evtType == 'blur')) {
                evtType = evtType == 'focus' ? 'focusin' : 'focusout';
            }
            if(!evtList[evtType]){
                evtList[evtType] = {};
                addEvent(actEl, evtType, bindEvent);
            }
            var ns = evtList[evtType];
            ns[funcName] = process;
        };
        /**
         * 移出代理事件
         * @method remove
         * @param {String} funcName
         * @param {String} evtType
         * @return {void}
         */
        that.remove = function(funcName, evtType){
            if(isIE && (evtType == 'focus' || evtType == 'blur')) {
                evtType = evtType == 'focus' ? 'focusin' : 'focusout';
            }
            if(evtList[evtType]){
                delete evtList[evtType][funcName];
                if($.core.obj.isEmpty(evtList[evtType])){
                    delete evtList[evtType];
                    $.core.evt.removeEvent(actEl, evtType, bindEvent);
                }
            }
        };
        
        that.destroy = function(){
            for(var k in evtList){
                for(var l in evtList[k]){
                    delete evtList[k][l];
                }
                delete evtList[k];
                $.core.evt.removeEvent(actEl, k, bindEvent);
            }
        };
        return that;
    };
});

仅修改add和remove两个方法，其他fireAction等方法没有做修改，若需要使用这些fireXX方法，需要相应做修改。