Event: Custom Event - tetsuya

昨日は、ソースコードの全文を書いてみた。
次はCustom Eventを朴訥にやってみる。この中のView example in new window.を開くと、ブラウザの「ソースコードの表示」でhtmlのソースが見れるのを発見。
なーんだ。というところだが、眺めていても得るものはないので、eclipse（）にコピペで作ってみる。

カスタムイベントは、イベントを自作してそれにコールバック関数をくっつけ（subscribeして）
好きなタイミングで（そのイベントを）発火させるためのものらしい。

以下の例でも、イベントのトリガーはclickだから、今ひとつ、使うシシュエーションがイメージ
できない。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css"> 
#container {width:400px; height:100px; padding:10px; border:1px dotted black;
            background-color:#CCCCCC; cursor:pointer;} 
#resizer {width:200px; height:75px; background-color:#00CCFF;} 
#subscriberWidth {width:200px; height:75px; margin-top:10px;background-color:#CC9966;} 
#subscriberHeight {width:200px; height:75px;  margin-top:10px;background-color:#FF3333;} 
</style>

<!-- 読み込むscriptはyahoo-dom-event/yahoo-dom-event.jsだけ。 --> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" ></script> 

<script>
// 
//(function (){
// 式;
// })();
// 形式で実行させる。
// (function(){式})(); 
// は、関数に名前をつけない記法。式を評価後に後ろの()で、式を実行する。
//
(function() {

//create a new custom event, to be fired
//when the resizer div's size is changed
//まずは、カスタムイベント・オブジェクトを作る。
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");

//get local references to dom elements,
//for convenience
// どうやら、Dom.getで<div id=xxx>オブジェクトが取得できるらしい。
var container = YAHOO.util.Dom.get("container");
var resizer = YAHOO.util.Dom.get("resizer");

//when the container is clicked on, change the 
//dimensions of the resizer -- as long as it appears
//to be a valid new size (>0 width, >12 height).
// クリック時の動き出す関数。
// 最後にカスタムイベントをもぐりこませる。
// カスタムイベントは、exampleの下２つのdivに適用する。
function fnClick(e){
	//0,0 point is the top left corner of the container,
	//minus its padding:
	// どうやら、Dom.getXで<div id=xxx>オブジェクトのX座標が取得できるらしい。
	var containerX = YAHOO.util.Dom.getX("container");
	var containerY = YAHOO.util.Dom.getY("container");
	// イベントが発生したときのX座標もとれるらしい。
	var clickX = YAHOO.util.Event.getPageX(e);
	var clickY = YAHOO.util.Event.getPageY(e);
	//get container padding using Dom's getStyle():
	// どうやら、Dom.getStyleで<div id=xxx>オブジェクトのStyleも取得できるらしい。
	var containerPaddingX = 
　　　　　　parseInt(YAHOO.util.Dom.getStyle("container","padding-left"), 10);
	var containerPaddingY = 
　　　　　　parseInt(YAHOO.util.Dom.getStyle("container","padding-top"), 10);
	var newWidth = clickX - containerX - containerPaddingX;
	var newHeight = clickY - containerY - containerPaddingY;
	
	//if there is a valid new dimension, we'll change
	//resizer and fire our custom event
	if ((newWidth > 0)||(newHeight > 12)) {
		//correct new height/width to guarantee
		//minimum of 0x12	
		if (newWidth < 0) {newWidth = 1;}
		if (newHeight < 12) {newHeight = 12;}
		//show new dimensions in resizer:
		YAHOO.util.Dom.get("resizer").innerHTML = 
                      "New size: " + newWidth + "x" + newHeight;
		//change the dimensions of resizer, using
		//Dom's setStyle:
		YAHOO.util.Dom.setStyle("resizer", "width", newWidth + "px");
		YAHOO.util.Dom.setStyle("resizer", "height", newHeight + "px");

		 //fire the custom event, passing
		 //the new dimensions in as an argument;
		 //our subscribers will be able to use this
		 //information:
		// onSizeChangeイベントを発生させる。
		// この際、onSizeChangeにくっついているsubscriberが発砲。
		onSizeChange.fire({width: newWidth, height: newHeight});
	};
}

//listen for clicks on the container
// グレーの箱に仕込むイベントハンドラー
// 結局、ここでトリガーを引いている。
YAHOO.util.Event.addListener("container", 'click', fnClick);

//a handler to respond to the custom event that
//we're firing when the resizer changes size; we'll
//resize its width to match the resizer.
// onSizeChangeイベントに仕込むハンドラー（その１）
fnSubscriberWidth = function(type, args) {
	var elWidth = YAHOO.util.Dom.get("subscriberWidth");
	var newWidth = args[0].width;
	YAHOO.util.Dom.setStyle(elWidth, "width", (newWidth + "px"));
	elWidth.innerHTML = ("My new width: " + newWidth + "px");
}

//another handler to respond to the custom event that
//we're firing when the resizer changes size; this
//one cares about the height of the resizer.
// onSizeChangeイベントに仕込むハンドラー（その２）
fnSubscriberHeight = function(type, args) {
	var elHeight = YAHOO.util.Dom.get("subscriberHeight");
	var newHeight = args[0].height;
	YAHOO.util.Dom.setStyle(elHeight, "height", (newHeight + "px"));
	elHeight.innerHTML = ("My new height: " + newHeight + "px");
}

//onSizeChangeイベントにハンドラーをくっつける（subscribeする）。
onSizeChange.subscribe(fnSubscriberWidth);
onSizeChange.subscribe(fnSubscriberHeight);

})();

</script>
</HEAD>

<BODY>

<div id="container">
  <div id="resizer">
  	Click anywhere within the grey box 
	to resize me.
  </div>
</div>
<div id="subscriberWidth">
  <strong>Width will resize to match blue 
  box.</strong>
</div>
<div id="subscriberHeight">
  <strong>Height will resize to match blue
  box.</strong>
</div>
</body>
</HTML>