YUIのTreeViewのイベント処理の設定をする

http://d.hatena.ne.jp/nakamura001/20080516/1210953691
こちらのエントリーに続き、次はイベント処理の設定をするサンプルです。

1. 前回までに解説した部分の話は省略するため

こちらのHTMLファイル(treeview03.html)をベースに話を進めます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>TreeView03</title>
	<!-- css -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/treeview/assets/skins/sam/treeview.css">
	<!-- js -->
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js"></script>
	<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/treeview/treeview-min.js"></script>
</head>

<body class="yui-skin-sam">

	<div id="treeDiv1"></div>

	<script type="text/javascript">
(function() {
	var tree;
	
	function treeInit() {
		tree = new YAHOO.widget.TreeView("treeDiv1");
		var root = tree.getRoot();

		tree.draw();
	}

	YAHOO.util.Event.onDOMReady(treeInit);
})();
	</script>
</body>
</html>

2. ノードを追加。

		var root = tree.getRoot();
		var myobj = { label: "mylabel1", id:"myid1" } ;
		var tmpNode = new YAHOO.widget.TextNode(myobj, root, false);

		myobj = { label: "mylabel2", id:"myid2" } ;
		var tmpNode2 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

		myobj = { label: "mylabel3", id:"myid3" } ;
		var tmpNode3 = new YAHOO.widget.TextNode(myobj, tmpNode, false);

3. 続いて、その下にイベントを記述。

		// ツリーを展開したときに実行される関数を設定
		tree.subscribe("expand", function(node) {
			alert("ID:" + node.data.id + " を展開しました。");
		});

		// ツリーを閉じたときに実行される関数を設定
		tree.subscribe("collapse", function(node) {
			alert("ID:" + node.data.id + " を閉じました。");
		});

		// ラベルをクリックしたときに実行される関数を設定
		tree.subscribe("labelClick", function(node) {
			alert("ID:" + node.data.id + " のラベルをクリックしました。");
		});