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

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

标签： CustomEvent, YUI

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