南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

YAHOO.util.CustomEvent是什么呢？其实很简单，它就是一个构造函数而已，那么它到底有何作用呢？

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两个回调~

标签： CustomEvent, YUI

这篇文章发布于 2009年03月29日，星期日，18:04，归类于 YUI。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。