Skip to content

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

by : 2017/10/05

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

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

サンプルコード

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

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

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

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


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

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

イベント:非DOM要素(JavaScriptオブジェクト)でのイベントの使用 – hifive

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。