这里主要是说中文注释的问题，秦歌文章下边的中文注释问题的解决方法，第3、4步都可以省略了，目前版本的YUI Doc可以正确生成文档的，但要求是文件为utf-8文件。大家正常编码的时候通常都不习惯文件为utf-8的，所以，这个是相当繁琐的，解决的办法就是在copy文件的时候，将copy的文件转换为utf-8文件，这样子不会影响原来的文件，还能正确生成文档。

修改方法：

打开yuidoc/bin/下的yuidoc_parse.py文件，找到第43行：

fileStr=StringIO(f.read()).getvalue()

将其修改为：

fileStr=StringIO(f.read()).getvalue().decode("GBK").encode("UTF8")

OK，这样子就解决了问题~

getElementsByClassName: function(className, tag, root, apply, o, overrides) {
    className = lang.trim(className);
    tag = tag || '*';
    root = (root) ? Y.Dom.get(root) : null || document;
    if (!root) {
        return [];
    }
    var nodes = [],
        elements = root.getElementsByTagName(tag),
        hasClass = Y.Dom.hasClass;
    if(className.indexOf('|')>0) {
        var classnames = className.split('|');
        //找到所有节点
        for (var i = 0, len = elements.length; i < len; ++i) {
            for (var j = 0; j < classnames.length; ++j) {
                if ( hasClass(elements[i], lang.trim(classnames[j])) ) {
                    nodes[nodes.length] = elements[i];
                }
            }
        }
        //剔除相同的节点
        for (var k = 0; k < nodes.length; k++) {
            for(var l = k+1; l < nodes.length; l++) {
                if(nodes[k] == nodes[l]) {
                    nodes.splice(l,1);
                }
            }
        }
    } else {
        for (var i = 0, len = elements.length; i < len; ++i) {
            if ( hasClass(elements[i], className) ) {
                nodes[nodes.length] = elements[i];
            }
        }

    }
    if (apply) {
        Y.Dom.batch(nodes, apply, o, overrides);
    }
    return nodes;
}

用法很简单，就是在class之间加上“|”，比如：YAHOO.util.Dom.getElementsByClassName('hehe|haha|heihei')。

if ( this._isValidCollection(el)) {
    var ok = true;
    for (var i=0,len=el.length; i<len; ++i) {
        ok = this.on(el[i],
                       sType,
                       fn,
                       obj,
                       overrideContext) && ok;
    }
    return ok;

} else if (YAHOO.lang.isString(el)) {
    var oEl = this.getEl(el);
    if (oEl) {
        el = oEl;
    } else {
        this.onAvailable(el, function() {
           YAHOO.util.Event.on(el, sType, fn, obj, overrideContext);
        });
        return true;
    }
}

this._isValidCollection(el)是判断el是否是一个数组，详细可以看下_isValidCollection这个方法，如果是数组的话，就拆分开来，调用YAHOO.util.Event.addListener。if (YAHOO.lang.isString(el))是判断是否是字符串，也就是说el是否为id，如果是的话就转换成HTMLElement，然后调用YAHOO.util.Event.addListener。其实这两个判断的目的都是为了将el转化为HTMLElement，然后再执行YAHOO.util.Event.addListener。

if ("unload" == sType && obj !== this) {
    unloadListeners[unloadListeners.length] =
            [el, sType, fn, obj, overrideContext];
    return true;
}

这个是判断事件的类型，如果是window.unload的话，就把事件加入到unloadListeners里。

if (this.useLegacyEvent(el, sType)) {
    var legacyIndex = this.getLegacyIndex(el, sType);
    if ( legacyIndex == -1 ||
                el != legacyEvents[legacyIndex][0] ) {
        legacyIndex = legacyEvents.length;
        legacyMap[el.id + sType] = legacyIndex;
        legacyEvents[legacyIndex] =
            [el, sType, el["on" + sType]];
        legacyHandlers[legacyIndex] = [];
        el["on" + sType] =
            function(e) {
                YAHOO.util.Event.fireLegacyEvent(
                    YAHOO.util.Event.getEvent(e), legacyIndex);
            };
    }
    legacyHandlers[legacyIndex].push(li);

} else {
    try {
        this._simpleAdd(el, sType, wrappedFn, bCapture);
    } catch(ex) {
        this.lastError = ex;
        this.removeListener(el, sType, fn);
        return false;
    }
}

if (this.useLegacyEvent(el, sType)) ，主要是判断浏览器的版本是否为版本号小于418的Safari，这个版本的Safari中，如果注册的事件是click和dbclick，就需要使用遗留事件系统。getLegacyIndex(el, sType)用el的id加上sType作为key在legacyMap中取出遗留事件的索引。fireLegacyEvent(el, sType)触发事件处理过程，估计所谓的遗留事件系统是指一个类型的事件只能注册一个处理器，所以YUI先保存默认的处理器，然后为元素注册一个新的处理器，这个处理器先执行legacyHandlers中的处理器，然后在调用被保存起来的默认行为。这样会导致preventDefault在遗留事件系统中不起作用。如果是其它浏览器的话就直接使用this._simpleAdd(el, sType, wrappedFn, bCapture)来添加事件。

_simpleAdd: function () {
    if (window.addEventListener) {
        return function(el, sType, fn, capture) {
            el.addEventListener(sType, fn, (capture));
        };
    } else if (window.attachEvent) {
        return function(el, sType, fn, capture) {
            el.attachEvent("on" + sType, fn);
        };
    } else {
        return function(){};
    }
}()

这个大家应该比较熟悉了哈，就是给节点添加事件，判断是否是遵循W3C标准的浏览器，然后使用相应的方法。
YAHOO.util.Event.addFocusListener与YAHOO.util.Event.addBlurListener都是直接调用YAHOO.util.Event.addListener方法，是它的特殊方法。

参考资料：

• Yahoo! UI Library
• YUI Research — Event Module

Demo链接：http://www.12sui.cn/test/19

在写每一段代码的时候，我们都应该考虑好该如何去写，如何去放置，我这个这个例子很简单，首先我们创建一个自定义事件：

var onCheck = new Y.CustomEvent('onCheck');

然后我们写一下点击按钮时需要触发的onclick事件：

function changeValue(e) {
  var target = E.getTarget(e);
  var value = target.name;
  if(value == 'a') {
    target.firstChild.nodeValue = '回答正确';
    answer = 'right';
  } else {
    target.firstChild.nodeValue = '回答错误';
    answer = 'wrong';
  }
  onCheck.fire(answer);
}

如果回答正确的话，就将按钮的文字修改为‘回答正确’，如果回答错误的话就把按钮的文字改为‘回答错误’，而这个函数的最后onCheck.fire(answer);用来触发订阅的事件。在这里，我们不仅仅是需要给出正确的提示，我们还要给回答的人一些相应的奖惩，所以写了另一个显示提示信息的函数。

function showmsg(type,args) {
  D.setStyle('J_'+args[0],'display','block');
}

这个函数根据带进来的函数来显示提示信息，而这个事件怎么被onclick事件触发呢，一来是需要fire来最终激活，另外我们还需要订阅这个事件：

onCheck.subscribe(showmsg);

当然，可以订阅很多很多个事件，只要通过fire触发onCheck这个自定义事件就会让这些事件都发生。应该比较好理解吧哈~看一下完整的代码：

(function(){
	var Y = YAHOO.util,D = Y.Dom,E = Y.Event,answer;
	var onCheck = new Y.CustomEvent('onCheck');
	function changeValue(e) {
		var target = E.getTarget(e);
		var value = target.name;
		if(value == 'a') {
			target.firstChild.nodeValue = '回答正确';
			answer = 'right';
		} else {
			target.firstChild.nodeValue = '回答错误';
			answer = 'wrong';
		}
		onCheck.fire(answer);
	}
	var buttons = document.getElementsByTagName('button');
	E.on(buttons,'click',changeValue);
	function showmsg(type,args) {
		D.setStyle('J_'+args[0],'display','block');
	}
	onCheck.subscribe(showmsg);
})();

YUI的自定义事件可能在写组件的时候用的时候会比较多，平常可能很少人会去用，其实还是很方便的，如果一个事件很麻烦的不妨拆开，用自定义事件试试。

4月份啦，我女儿快生日了，提前祝乖女儿生日快乐，希望今年能考上理想的大学，加油哈。

我妈又给我打电话催我找老婆了。。。。头疼。。。。那么急干嘛。。。。愁死啦。。。

The CustomEvent class lets you define events for your application that can be subscribed to by one or more independent component.

通过YAHOO.util.CustomEvent可以创建自定义事件，并被其他事件订阅。打个比方，就像我的博客，很多人可以订阅，而我一旦发布了新的文章，那么其他订阅的人都会收到新的文章。因为代码比较多，就着重讲一下YAHOO.util.CustomEvent的两个方法：fire和subscribe。

subscribe: function(fn, obj, overrideContext) {
        if (!fn) {
throw new Error("Invalid callback for subscriber to '" + this.type + "'");
        }

        if (this.subscribeEvent) {
            this.subscribeEvent.fire(fn, obj, overrideContext);
        }

        this.subscribers.push( new YAHOO.util.Subscriber(fn, obj, overrideContext) );
    }

subscribe主要是用来订阅事件，它有三个参数，fn是要执行的回调函数，obj是作用域或者其它对象，overrideContext决定是否用obj作为上下文。this.subscribeEvent.fire(fn, obj, overrideContext);作何用呢？先看看subscribeEvent：this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true);，YUI对它的注释是：

Custom events provide a custom event that fires whenever there is a new subscriber to the event. This provides an opportunity to handle the case where there is a non-repeating event that has already fired has a new subscriber.

意思就是自定义事件确保任何时候任何一个新的订阅者都能被及时的引燃，就是在每一个事件订阅的时候就点燃一下~this.subscribers.push( new YAHOO.util.Subscriber(fn, obj, overrideContext) );是将订阅者加入到subscribers中。

fire: function() {
        this.lastError = null;
        var errors = [],
            len=this.subscribers.length;
        if (!len && this.silent) {
            return true;
        }
        var args=[].slice.call(arguments, 0), ret=true, i, rebuild=false;
        if (!this.silent) {
            YAHOO.log( "Firing "       + this  + ", " +
                       "args: "        + args  + ", " +
                       "subscribers: " + len,
                       "info", "Event"                  );
        }
        var subs = this.subscribers.slice(), throwErrors = YAHOO.util.Event.throwErrors;
        for (i=0; i" + (i+1) + ": " +  s, "info", "Event" );
                }
                var scope = s.getScope(this.scope);
                if (this.signature == YAHOO.util.CustomEvent.FLAT) {
                    var param = null;
                    if (args.length > 0) {
                        param = args[0];
                    }
                    try {
                        ret = s.fn.call(scope, param, s.obj);
                    } catch(e) {
                        this.lastError = e;
YAHOO.log(this + " subscriber exception: " + e, "error", "Event");
                        if (throwErrors) {
                            throw e;
                        }
                    }
                } else {
                    try {
                        ret = s.fn.call(scope, this.type, args, s.obj);
                    } catch(ex) {
                        this.lastError = ex;
YAHOO.log(this + " subscriber exception: " + ex, "error", "Event");
                        if (throwErrors) {
                            throw ex;
                        }
                    }
                }
                if (false === ret) {
                    if (!this.silent) {
YAHOO.log("Event stopped, sub " + i + " of " + len, "info", "Event");
                    }
                    break;
                }
            }
        }
        return (ret !== false);
    }

fire就是点火。。。它其实就是个导火线，用来引发订阅者的爆发。var errors = [],len=this.subscribers.length; subscribe函数已经将每个订阅者都添加到了subscribers中，var args=[].slice.call(arguments, 0)是将参数转化为数组（arguments并非真正意义上的数组），接下来的一个for循环，挨个去执行每一个回调函数，其实就这么简单。。。可能有点迷惑，看下YUI给的一个小例子吧：http://developer.yahoo.com/yui/examples/event/custom-event_clean.html

这个例子很简单，就是在点击灰色区域的时候改变盒子的大小，同时触发另外两个盒子一同变化，读一下代码：

首先是var onSizeChange = new YAHOO.util.CustomEvent(“onSizeChange”);，创建自定义事件，然后function fnClick(e){ /*…具体的内容省略…*/ onSizeChange.fire({width: newWidth, height: newHeight});}，这个函数主要是点击灰色区域时函数，在函数中点燃了onSizeChange的订阅者：onSizeChange.subscribe(fnSubscriberWidth)、onSizeChange.subscribe(fnSubscriberHeight);，执行了fnSubscriberWidth和fnSubscriberHeight两个回调~

YUI的Dom方法中的batch促成了大多数其他Dom方法的el可以使用数组，功劳不小哦~现在来看看batch方法：

batch: function(el, method, o, overrides) {
            var collection = [],
                scope = (overrides) ? o : window;

            el = (el && (el[TAG_NAME] || el.item)) ? el : Y.Dom.get(el); // skip get() when possible
            if (el && method) {
                if (el[TAG_NAME] || el.length === undefined) { // element or not array-like
                    return method.call(scope, el, o);
                } 

                for (var i = 0; i < el.length; ++i) {
                    collection[collection.length] = method.call(scope, el[i], o);
                }
            } else {
                YAHOO.log('batch called with invalid arguments', 'warn', 'Dom');
                return false;
            }
            return collection;
        }

应该是比较好理解，如果el是id或者单节点的话，就直接返回，如果是数组的话就循环一下，最后输出数组。

可能但看这个不是很好理解，那么看个例子吧：

setStyle: function(el, property, val) {
            Y.Dom.batch(el, Y.Dom._setStyle, { prop: property, val: val });
        },

        _setStyle: function() {
            if (isIE) {
                return function(el, args) {
                    var property = Y.Dom._toCamel(args.prop),
                        val = args.val;

                    if (el) {
                        switch (property) {
                            case 'opacity':
                                if ( lang.isString(el.style.filter) ) { // in case not appended
                                    el.style.filter = 'alpha(opacity=' + val * 100 + ')';

                                    if (!el[CURRENT_STYLE] || !el[CURRENT_STYLE].hasLayout) {
                                        el.style.zoom = 1; // when no layout or cant tell
                                    }
                                }
                                break;
                            case 'float':
                                property = 'styleFloat';
                            default:
                            el.style[property] = val;
                        }
                    } else {
                        YAHOO.log('element ' + el + ' is undefined', 'error', 'Dom');
                    }
                };
            } else {
                return function(el, args) {
                    var property = Y.Dom._toCamel(args.prop),
                        val = args.val;
                    if (el) {
                        if (property == 'float') {
                            property = 'cssFloat';
                        }
                        el.style[property] = val;
                    } else {
                        YAHOO.log('element ' + el + ' is undefined', 'error', 'Dom');
                    }
                };
            }

        }()

我们可以看到setStyle里使用了Y.Dom.batch(el, Y.Dom._setStyle, { prop: property, val: val });，很容易理解吧哈。。。也不晓得该怎么解释。。就这样吧哈。。

insertBefore ( newNode , referenceNode )：这个和Dom方法中的insertBefore一样，就是将一个节点插入到另一个节点的前边。

insertAfter ( newNode , referenceNode )：Dom方法中没有insertAfter 方法，YUI根据insertBefore构建了这个方法，就是将一个节点插入到另一个节点的后边。

getDocumentHeight ( )：获取页面的高度。

getDocumentWidth ( )：获取页面的宽度。

getViewportHeight ( )：获取页面的可视高度。

getViewportWidth ( )：获取页面的可视宽度。

getDocumentScrollLeft ( document )：获取滚的左宽度。。这个我也不知道咋描述。。。

getDocumentScrollTop ( document )：获取滚的上宽度。。。

getClientRegion ( )：获取浏览器的可视区域，返回top、right、bottom、left、height、width。

getRegion ( el )：获取元素的坐标以及宽高信息，返回top、right、bottom、left、height、width，这个可能用的情况还是比较多吧哈。

getXY ( el )：获取元素的坐标，返回left和top。

getX ( el )：获取元素的横向坐标，也就是离左侧的距离。

getY ( el )：获取元素的纵向总表，也就是离上部的距离。

setXY ( el , pos , noRetry )：设置节点的横向和纵向坐标。

setX ( el , x )：设置节点的横向坐标。

setY ( el , x )：设置纵向坐标。

hasClass ( el , className )：这个方法就是判断el是否拥有某一个class。

inDocument ( el , doc )：就是判断el是否在Dom结构中存在，一般我们使用removeChild方法会将元素移出到超空间，虽然是存在的，但是它不存在Dom结构中，普通的Dom方法中我是通过判断document.documentElement是否包含那个元素，YUI的方法其实一样的。

isAncestor ( haystack , needle )：判断是否是父节点，这个方法可以用来解决很困扰我们的onmouseover和onmouseout问题，要善用哈~

好久没有好好睡了，实在不行了，早点睡了哈，大家晚安~

getStyle ( el , property )：这个方法是获取元素的某个特定属性，el可以是String、HTMLElement、Array，注意property是不能为Array的，样式有内嵌的和外链的，读取内嵌的（特指style定义的）还好，如果是链入的，因为IE和Dom获取style的方式不同（IE是currentStyle，而Dom的方法是window.getComputedStyle），所以经常我们使用的时候要判断，而YUI的这个方法已经涵盖了两种情况，可以随意的使用。另外提到的一点是，float是JavaScript的保留字，所以在读取样式的时候要cssFloat（Dom）或者styleFloat（IE）来代替，我也是在读YUI代码的时候发现这一点。貌似直接读取样式的操作并不常用，至少我是。。。

setStyle ( el , property , val )：这个方法应该是比较常用滴，因为我们操作样式表的目的就是为了改变元素的样式，需要注意的东西跟上一个一样，这里就不多说啦。

addClass ( el , className )：这个方法的作用是给元素添加一个className，正常我们操作的时候，要么直接设置el.className=”，要么el.className += ”，其实YUI代码里使用的方法并没什么高级的：Y.Dom.setAttribute(el, CLASS_NAME, trim(current + SPACE + className))，这个函数其实并没有比我们正常使用的方法高级多少，但是值得注意的是这里的el可以是Array的~

replaceClass ( el , oldClassName , newClassName )：这个方法是去替换元素的某个已经存在className，在普通Dom方法里我们也就是简单的replace一下，但是YUI里的这段代码却很费劲，主要是它考虑的太多了，觉得一般不会有那么变态的className命名吧。YUI的这段代码写的很精彩：

className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to)).split(Y.Dom._getClassRegex(to));
// insert to into what would have been the first occurrence slot
className.splice(1, 0, SPACE + to);
Y.Dom.setAttribute(el, CLASS_NAME, trim(className.join(EMPTY)));

其实我开始看的时候并不理解为什么要这么做，当时想着只要className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to))就OK了，为啥要拆了再组合，刚才写的时候请教了玉伯，总算想明白了哈，其实它的目的就是为了让className完美一点，就是里边没有多余的空格，每个className之间只有一个空格。

removeClass ( el , className )：这个方法其实就是把已有的className替换成空，当然如果元素本身并没有这个className，就会do nothing。

getAttibute ( el , attr )：就是获取元素的attribute属性值，这个需要注意的就是在IE8以下版本的IE浏览器和其他现代浏览器对class和for的差别（IE8以下版本：’for’: ‘htmlFor’,'class’: ‘className’，而其他正好反过来，我是在读YUI代码的时候才了解到for的差别），当然使用YUI的时候就不用考虑这个差异了。

generateId ( el , prefix )：这个的应用应该不多，其实它的作用就是给元素加上一个id，而且这个id是唯一的，如果当前元素有id的话，那么就什么都不做，最后返回的是这个id的名字（可能是一个数组，因为el可以是数组）。

get(el)：记得初学JavaScript的时候，最先认识的两个方法就是getElementById和getElementsByTagName，这两个东东也基本上能够找到大多数你需要找的东西啦。YUI里的get方法跟getElementById类似，但是它的能力却要强很多了，el可以是String、HTMLElement或者Array。

getElementsBy ( method , tag , root , apply , o , overrides )：这个会和getElementsByTagName比较像一点点吧，但是功能差好远，基本上getElementsBy应该可以找到一切你想找的元素，method是定义一个校验目标元素的方法，返回一个boolean值，tag是目标元素的nodeName，root是指在哪个元素中进行寻找，也可以说成是一个范围吧。apply，我必须要说下它。。当初它困扰我了半天，YUI给出的解释是“A function to apply to each element when found ”，可以理解为一个回调函数吧，再看看YUI的代码，其中有这么一段：

if (apply) {
     Y.Dom.batch(nodes, apply, o, overrides);
}

我当时的理解是，因为最终返回的是一个节点的数组嘛，我就以为执行完前边的校验后得到的结果再在apply中进行一次，也就是我在apply中再对结果元素进行下一步的节点寻找，那么最后返回的应该是apply执行后得到的所有节点集合。。。可是无论我怎么试，最终返回的都是通过method方法所得到数组，并没有再次通过apply获得更多的元素，嘿嘿，不要见笑哈，当时就是这么想的。。。后来发现，实际上不是这样子，我理解错误的原因只要就在那个batch上，当时的错误在于，我把batch放进getElementsBy里了，那么在batch里边return后应该不会再继续执行return nodes了，但是实际上这里的Y.Dom.batch(nodes, apply, o, overrides)只是一个最终的结果而已，所以return nodes还是会执行的。那么这个apply的作用在何处呢？其实作用就是执行一次回调嘛哈，它是可以实现我之前的想法的，但是不是直接返回的，举个例子：

var uls = YAHOO.util.Dom.getElementsBy(function(el){
    return el.className === 'J_tab';
},'ul','content');

这是寻找id为content的容器下className为J_tab的节点，那么如果我同时还需要获取每个ul下的所有li节点该怎么做呢，总不能再来一次循环吧，当然也可以啦，不过要好好利用下YUI吧，那就是让它获取ul的同时获取li：

var lis = [];
function getli(obj) {
    lis.push(obj.getElementsByTagName('li'));
}
var uls = YAHOO.util.Dom.getElementsBy(function(el){
    return el.className === 'J_tab';
},'ul','content',getli);

OK，这样子就一举两得了哈~后边的作用域和上下文就不多说啦，关于batch的神奇，下次再说哈，真的很神奇。。。

getElementBy ( method , tag , root )：这个就是通过method校验的第一个元素。

getElementsByClassName ( className , tag , root , apply , o , overrides )：是通过className进行元素寻找，其实这个方法是getElementsBy的一个特殊方法。

getChildren ( node )：这个与Dom中的childNode类似。

getChildrenBy ( node , method )：通过method方法过滤子元素，注意参数的顺序以及node不可为id。

getFirstChild ( node )：寻找第一个子元素，跟Dom中的firstChild有些类似。

getFirstChildBy ( node , method )：寻找第一个通过method校验的子元素，注意参数的顺序以及node不可为id。其实这个等同于getChildrenBy得到的第一个元素。

getLastChild ( node )：寻找最后一个子元素，与Dom中的lastChild有些类似。

getLastChildBy ( node , method )：与getFirstChildBy相反，倒着寻找。

getAncestorBy ( node , method )：寻找父节点，可以无限的往上级寻找，直到找到为止，node不能为id，跟Dom中的parentNode类似，不过这里不用反复的parentNode啦。

getAncestorByClassName ( node , className )：通过className寻找父节点，是getAncestorBy的一个特殊方法。

getAncestorByTagName ( node , tagName )：通过tagName寻找父节点，是getAncestorBy的一个特殊方法。

getNextSibling ( node )：寻找紧挨的下一个同级非文本节点的节点，与Dom中的nextSibling类似，省去了判断文本节点麻烦。

getNextSiblingBy ( node , method )：无限的往下找直到找到通过method校验的同级非文本节点，node不能为id，有了这个方法就不用无限的nextSibling啦。

getPreviousSibling ( node )：寻找紧挨的上一个同级非文本节点的节点，与Dom中的previousSibling类似，可以省去判断文本节点的麻烦。

getPreviousSiblingBy ( node , method )：无限的往前找直到找到通过method校验的同级非文本节点，node不能为id。