イベントを動的に追加、削除する

by moongift : 2017/10/05

Webシステムの開発時においてイベント通知はよく使われます。例えばjQueryでボタンを押した時のイベントは次のように設定されます。

view raw

index.js

hosted with ❤ by GitHub

こうした通知機能を任意のオブジェクトに追加できるのがhifiveのイベント通知機能になります。今回はイベントの動的な追加および削除の方法について紹介します。

サンプルコード

まずは基本的な処理について紹介します。

	function ObservableArray() {
	this.name = 'Init';
	};

	ObservableArray.prototype.updateName = function(name) {
	this.dispatchEvent({
	type: 'changeBefore',
	data: this,
	});
	this.name = name;
	this.dispatchEvent({
	type: 'change',
	data: this,
	});

	h5.mixin.eventDispatcher.mix(ObservableArray.prototype);
	}

view raw

index.js

hosted with ❤ by GitHub

次にイベント処理を定義します。これを関数にしておくのがコツです。

	var observableArray = new ObservableArray;
	function logger(e) {
	console.log(e);
	$('#result').val(`${$('#result').val()}\n,change event. Name is ${e.data.name}`);
	}

	// この処理の内容がイベント通知に使われます
	$('#update').on('click', function(e) {
	observableArray.updateName($('#value').val());
	});

view raw

index.js

hosted with ❤ by GitHub

そしてこの関数をイベント通知に追加します。

	$('#add').on('click', function(e) {
	listner = observableArray.addEventListener('change', logger);
	console.log(listner)
	});

view raw

index.js

hosted with ❤ by GitHub

逆に削除する時にも関数を指定します。そのため処理を無名関数ではなく、関数化しておく必要があります。

	$('#delete').on('click', function(e) {
	observableArray.removeEventListener('change', logger);
	});

view raw

index.js

hosted with ❤ by GitHub

addEventListenerを使ってイベントを購読し、removeEventListenerを使ってイベントの購読を解除します。その際、関数を指定する必要がありますので購読に使った関数をオブジェクトとして指定できる状態になっていなければなりません。無名関数では難しいのでご注意ください。

今回のコードはJSFiddleにアップロードされていますので実装時に参照してください。

From → hifive

コメントは受け付けていません。