今までなんとなく使っていたWEBページのイベントリスナーについて少し深く知る必要があったので、色々と調査した結果をメモしておきます。
そもそもイベントリスナーとイベント関数の違いから理解する必要があるので、そこから説明しておきます。
イベントリスナーとイベント関数の違い
この２つの違いは正直言って全く別物だが、イベントの実行タイミングは同じなので、出来ることならページ内では、どちらか一つに固定した方が管理は楽だろうと思われます。
Event関数のセットの仕方
document.body.onload = funtion(){
console.log("hoge-hoge-1");
};
EventListenerのセットの仕方
document.body.addEventListener("load" , function(){console.log("hoge-hoge-2" ,false)});
上記をHTMLソース内に記述すると、ページ読み込み時にどちらも実行されます。
２つの明確な違いは、関数の場合は、１つのfunctionしかセットできないのに対して、リスナーはaddっていう命令で分かる通り複数追加ができるしくみである。
リスナーって便利だな〜って思っていると、デメリットもあって、関数は、上書き、削除ができるが、リスナーはaddする時にセットする関数を明確に保持していないと、削除ができなくなる。
登録済みのリスナーや関数を強制実行する方法
これはonloadを実行するのはさほど難しくないと考えていたのだが、思いのほか、奥が深かったので、備忘録として残しておくことにした。
まず、関数のみを実行したい場合は、
document.bodu.onload();
とすると、登録された関数だけは実行できます。
でも、リスナーは実行されません。
リスナーを実行する方法は、
var evt = document.createEvent("HTMLEvents");
evt.initEvent("load",true, true);
document.body.dispatchEvent(evt);
createEvent
initEvent
dispatchEvent
これらの関数はなかなか使う時がないので、馴染み深いのですが、この3行をまとめて覚えておくといいでしょう。
ただし、この方法は関数とリスナーを同時に実行されてしまうので、関数を外したい時は、関数を一度クリアしておくといいでしょう。
document.body.onload = function(){};
IEでも使いたい
addEventListenerは、古いIEでは動作しません。
未だにIE7を使っている金融機関なども少なくないようで、仕事で行う場合はIE対応は必須です。
という事で、EventListenerを関数化しておくことをオススメします。
addEvent=function(t, m, f){
// Browser other than IE
if (t.addEventListener){
t.addEventListener(m, f, false)
}
//IE
else{
t.attachEvent('on' + m, function() { f.call(t , w.event); })}
}
};
t : 対象エレメント
m : イベントモード（load , click , mousedown ...）
f : 実行関数
課題
イベントリスナーを効率的に利用できると、このIEでも使える関数で十分なんですが、ここで言う課題は、removeEventListenerで追加登録されたリスナーが削除できるんですが、登録時にfunctionをそのまま指定して削除しないといけません。
jQueryを使う場合は、jQueryがグローバル変数で保持してくれているので、削除は難なくできるようですが、こうした作法にのっとっていない、野良プログラムの場合は、消すことができなくなるので、結構困りものです。
ちなみに、Chromeブラウザを使っているのであれば、以下のコマンドで、登録されているイベントを確認できます。
getEventListeners(window)
Object {load: Array[6], message: Array[3], DOMContentLoaded: Array[1], resize: Array[3], scroll: Array[1]…}
windowをイベント確認したいエレメントにすれば、個別に確認ができる。
ただし、この命令はChromeブラウザのデバッグコンソールのみで使える命令であって、JavaScriptソースコード内では、実行できないので、なんとももどかしい限りである。
0 件のコメント:
コメントを投稿