イベントの登録と削除
例えば地図を表示すると、地図のどこかでクリックされたりマウスが動いたりといった様々なイベントが発生しています。絶えず発生しているイベントの中から不要なイベントは無視して、必要なイベントだけを取り出し処理を設定することができます。
どのようなイベントが発生した時に処理を行いたいのかを設定するにはEventクラスでスタティックメソッドとして用意されているaddListenerメソッドを使います。
<static>EventListener Event.addListener(source:Object,
type:String,
method:Function,
object?:Object)
イベントを設定します。 Parameters: source イベントが設定されるオブジェクト type イベントの種別 Function イベント発生時に実行される処理 Object イベント実行時のスコープとなる(thisになる)オブジェクト Returns: EventListenerクラスのオブジェクト
1番目の引数に対象となるオブジェクトを指定します。例えばMapクラスのオブジェクトなどを指定します。2番目の引数にはイベントの種類を指定します。3番目の引数にはイベントが発生した時に呼び出す関数を指定します。
またメソッドを実行するとEventListenerクラスのオブジェクトを戻り値として返します。このオブジェクトはイベント処理を削除する場合に使用します。
例として、地図上でクリックイベントが発生した場合に対する処理は次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
Y.Event.addListener(ymap, 'click', clickMap);
function clickMap(latlng){
alert(latlng.lat() + ',' + latlng.lng() + 'がクリックされました。');
}
イベントが発生した時に呼び出される関数には、発生したイベントに応じて引数が渡されてきます。今回のようにクリックイベントの場合はクリックが発生した座標が引数として渡されてきますので、関数の中でクリックされた座標を参照することが可能です。
登録したイベント処理が不要になった場合は、イベント処理を削除することができます。
イベント処理を削除するにはEventクラスでスタティックメソッドとして用意されているremoveListenerメソッドを使います。
<static> Event.removeListener(listener:EventListener)
Event.addListenerで追加したイベントを削除します。 Parameters: listener Event.addListenerの戻り値
引数にはイベント登録の時に戻り値として返されたEventListenerクラスのオブジェクトを指定します。
具体的には次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
var listener = Y.Event.addListener(ymap, 'click', clickMap);
Y.Event.removeListener(listener);
サンプルプログラム
では実際に試してみます。
var ymap;
window.onload = function() {
ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.681082,139.76723), 15);
Y.Event.addListener(ymap, 'click', clickMap);
}
function clickMap(latlng){
ymap.zoomIn();
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Yahoo! JavaScriptマップAPI</title>
<script type="text/javascript" charset="utf-8"
src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
</script>
<script src="./js/code1_1.js" type="text/javascript"></script>
</head>
<body>
<p>
JavaScriptマップAPIを使ったサンプルです。
</p>
<div id="map" style="width:400px; height:300px"></div>
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</body>
</html>
ブラウザでアクセスすると次のように表示されます。
今回は地図上でクリックするとズームレベルが一つ増加するようにしてあります。
クリックするたびにズームレベルが一つ増加しました。
( Written by T.buzz.Ikura+ )