[JavaScript] イベントリスナーを深く知る

web-845807_1280
LINEで送る
Share on GREE
Share on LinkedIn

今までなんとなく使っていたWEBページのイベントリスナーについて少し深く知る必要があったので、色々と調査した結果をメモしておきます。
そもそもイベントリスナーとイベント関数の違いから理解する必要があるので、そこから説明しておきます。

イベントリスナーとイベント関数の違い

この2つの違いは正直言って全く別物だが、イベントの実行タイミングは同じなので、
出来ることならページ内では、どちらか一つに固定した方が管理は楽だろうと思われます。

Event関数のセットの仕方

EventListenerのセットの仕方

上記をHTMLソース内に記述すると、ページ読み込み時にどちらも実行されます。
2つの明確な違いは、関数の場合は、1つのfunctionしかセットできないのに対して、リスナーはaddっていう命令で分かる通り複数追加ができるしくみである。
リスナーって便利だな〜って思っていると、デメリットもあって、関数は、上書き、削除ができるが、リスナーはaddする時にセットする関数を明確に保持していないと、削除ができなくなる。

登録済みのリスナーや関数を強制実行する方法

これはonloadを実行するのはさほど難しくないと考えていたのだが、思いのほか、奥が深かったので、備忘録として残しておくことにした。
まず、関数のみを実行したい場合は、

とすると、登録された関数だけは実行できます。
でも、リスナーは実行されません。

リスナーを実行する方法は、

createEvent
initEvent
dispatchEvent
これらの関数はなかなか使う時がないので、馴染み深いのですが、この3行をまとめて覚えておくといいでしょう。
ただし、この方法は関数とリスナーを同時に実行されてしまうので、関数を外したい時は、関数を一度クリアしておくといいでしょう。

IEでも使いたい

addEventListenerは、古いIEでは動作しません。
未だにIE7を使っている金融機関なども少なくないようで、仕事で行う場合はIE対応は必須です。
という事で、EventListenerを関数化しておくことをオススメします。

t : 対象エレメント
m : イベントモード(load , click , mousedown …)
f : 実行関数

課題

イベントリスナーを効率的に利用できると、このIEでも使える関数で十分なんですが、ここで言う課題は、removeEventListenerで追加登録されたリスナーが削除できるんですが、登録時にfunctionをそのまま指定して削除しないといけません。
jQueryを使う場合は、jQueryがグローバル変数で保持してくれているので、削除は難なくできるようですが、こうした作法にのっとっていない、野良プログラムの場合は、消すことができなくなるので、結構困りものです。

ちなみに、Chromeブラウザを使っているのであれば、以下のコマンドで、登録されているイベントを確認できます。

windowをイベント確認したいエレメントにすれば、個別に確認ができる。
ただし、この命令はChromeブラウザのデバッグコンソールのみで使える命令であって、JavaScriptソースコード内では、実行できないので、なんとももどかしい限りである。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*