そういえば。

Ajax YUI Event

そういえば、先の投稿時にevtと書いて気がついたのだけど、ブラウザーはFireFox3を使っている。
IEは使っていません。

そういえば、の追加なのだけど、Exampleばかりに目が行っていたら、Eventのトップにも基本事項が書いてあることを見逃していた。

基本の基本としては、

YAHOO.util.Event.addListener(取り出したオブジェクト, イベント, 発火する関数);

の書式で、任意のオブジェクト（DIVが普通だろう）のイベントを、リスナーに引っ掛けられる。

<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"> 
<style>
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" ></script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" ></script> 

<script>
init= 	function() {
		// 普通のJavaScriptの書式
		var oElement = document.getElementById("elementid");
		function fnCallback(e) { alert("クリックされました"); }
		// oElementのClickイベントに、fnCallbackを仕込む。
		YAHOO.util.Event.addListener(oElement, "click", fnCallback);
}
</script>
</HEAD>

<!-- windowがloadしてからでないと、getElementById()が空振りする。
onContentReadyを参照（これなら取れる）。-->
<BODY onload=init()>
<p>
<DIV id="elementid" style={width:200px;height100px;background-color:yellow;}>
ここをクリックしてください。
</DIV>
</p>

</BODY>
</HTML>

画面は

こんな感じ。

上のdocument.getElementById("elementid")は省略できるらしい。
下の例では、id="elementid"の

を２つ用意しているが、document.getElementById("elementid")
と同様に、「最初のエレメント」しか拾わない。

<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"> 
<style>
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" ></script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" ></script> 

<script>
init= 	function() {
	
		function fnCallback(e) { alert("クリックされました"); }
		// id="elementid"の最初のオブジェクトをさがし、そのClickイベントに、
		// fnCallbackを仕込む。
		YAHOO.util.Event.addListener("elementid", "click", fnCallback);
}
</script>
</HEAD>

<!-- windowがloadしてからでないと、getElementById()が空振りする。
	onContentReadyを参照（これなら取れる）。-->
<BODY onload=init()>
<p>
<DIV id="elementid" style={width:200px;height100px;background-color:yellow;}>
ここをクリックしてください。
</DIV>
</p>

<p>
<!-- こっちにはListner入らないよ -->
<DIV id="elementid" style={width:200px;height100px;background-color:lime;}>
ここをクリックしてください。
</DIV>
</p>

</BODY>
</HTML>


このidの指定方法は、以下のように配列に拡張できるとかいてある。

<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"> 
<style>
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" ></script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" ></script> 

<script>
init= 	function() {
		var ids = [element1,element2];
		function fnCallback(e) { alert("クリックされました  " 
			+ e.currentTarget.id); }
		// 配列idsに登録されているidのエレメント（最初のもの）を探し、
		// そののClickイベントに、fnCallbackを仕込む。
		YAHOO.util.Event.addListener(ids, "click", fnCallback);
}
</script>
</HEAD>

<!-- windowがloadしてからでないと、getElementById()が空振りする。
	onContentReadyを参照（これなら取れる）。-->
<BODY onload=init()>
<p>
<DIV id="element1" style={width:200px;height100px;background-color:yellow;}>
ここをクリックしてください。
</DIV>
</p>

<p>
<!-- 今度はこっちにもListnerに入るよ -->
<DIV id="element2" style={width:200px;height100px;background-color:lime;}>
ここをクリックしてください。
</DIV>
</p>

</BODY>
</HTML>

画面は

こんな感じ。