tilamic.jsの使い方その９・'.on()'メソッド

今回も引き続きtilamic.jsの解説記事です。

今回はタイルにイベントリスナーを設定する'.on()'メソッドについて解説します。
この記事の内容はtilamic.js Method-onとほぼ同じです。

書式

.on(events[, data], handler)

'.on()'メソッドは基本的にはjQueryの'.on()'イベントと同じように使用できます。
eventsは文字列型でハンドラを関連付けるイベントの種類です。スペースで区切ることで複数設定することもできます。
dataはオブジェクト型でハンドラに渡すイベントオブジェクトに含められるデータです。この引数は省略可能です。jQueryの'.on()'メソッドではdataはどのような型でも渡すことができますがtilamic.jsではオブジェクト型に限られます。これはtilamic.jsの'.on()'メソッドがハンドラに渡すjQueryイベントにはデフォルトで「どのタイルでイベントが発生したか」という情報が含まれるためです。
handlerは関数型でイベント発生時に呼び出される関数です。この関数にはjQueryイベントオブジェクトが渡されます。

'.on()'イベントはアクティブなタイルだけにイベントリスナーを設定します。もしすべてのタイルに同じイベントを設定し、どのタイルでイベントが発生したかを判定する必要がないのであれば、タイルではなくエリア自体にイベントを設定するほうが効率的です。
ハンドラに渡されるイベントオブジェクトはjQueryイベントですが、このデータには「どのタイルでイベントが発生したか」という情報が付与されています。"event.data['tileIndex']"がそれに当たります。

動作デモ
(動作の様子はこちらでご覧いただけます。)

<p class="sampleExp">
	Click some one of the tiles.
</p>
<div id="tiles" style="width: 60%; cursor: pointer; margin-top: 0" class="preview">
	<img src="../img/photo1.jpg" alt="photo1" />
	<img src="../img/photo2.jpg" alt="photo2" />
	<img src="../img/photo3.jpg" alt="photo3" />
	<img src="../img/photo4.jpg" alt="photo4" />
</div>
<script>
	$(function(){
		var tilamic = new Tilamic('#tiles', {
			'aspectRatio': 853/ 1280
		});
		
		tilamic.on('click', function(event){
			window.alert('Number ' + event.data['tileIndex'] + ' tile is clicked!');
		});
		
		var imgID = 1;
		setInterval(function(){
			tilamic.flip(imgID % 4);
			imgID++;
		}, 3000);
	});
</script>