我才12岁 ?

前边稍微介绍了下YUI的CustomEvent，可能还不够明了，这里再举一个简单的小例子。其实他的原理就是在触发一个事件的时候，可以联动的去触发其他你想触发的事件。前边说的那个YUI的例子虽然比较简单，但是我觉得它体现了一种理念，就是触发事件自身与其关联的事件就在正常的触发中进行，而额外的需要触发的事件通过fire来触发。当然，可能这种并不太正确，这里依据这个观点举一个简单的小例子。

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月份啦，我女儿快生日了，提前祝乖女儿生日快乐，希望今年能考上理想的大学，加油哈。

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

继续阅读 »

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中。

继续阅读 »