Javascriptのイベント操作って、eventListener処理が主流になってから、便利なんだけど、扱い自体は出来ないことも増えてしまいました。
クリックやスクロールなどのイベントは再利用する機会が多いですが、onload系に関しては、再利用する事ができないですね。
そもそもloadイベントは、読み込み時のタイミング合わせの為に使われるケースが常ですが、WEBページの特殊処理を行う場合に、再利用するケースが出てきたので、その時行ったやり方と、同時に行った調査内容をメモしておきます。
イベント登録の種類
onloadイベントだけい絞って説明すると、このイベントの登録できる種類は下記のパターンあります。
// 直接記述
document.body.onload = function(){console.log("Direct-event")};
// タグ記述
<body onload="javascript:console.log('Tag-event')">
// リスナー記述
documeent.body.addEventListener("load" , function(){console.log("Event-Listener")} , false);
直接記述とタグ記述は、同じ登録データになるので、JSでこの書き方をすると、タグで直接書かれているイベントが上書きされてしまいます。
その点、リスナー登録されたものは、重複していても、かならず追記されるように複数登録することができます。
無名関数と組み合わせることで、サイレントイベントのように仕込むことが可能です。
EFOや、AD系では、この技術は当たり前になってますが、このやり方は、一度登録されると除外する事ができなくなるので、バグったときは非常に迷惑なイベントになってしまいます。
実行方法
慣れると、下記をコピペするだけで、特定のエレメント、特定のイベントに対しても、同時に実行することは可能です。
リスナー登録の実行
var evt = document.createEvent("HTMLEvents");
evt.initEvent("load", false, true);
window.dispatchEvent(evt);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("load", false, true);
document.dispatchEvent(evt);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("load", false, true);
document.body.dispatchEvent(evt);
この上記の実行方法はリスナー登録がされている場合の実行方法で、直接登録されたイベントは実行されません。
直接登録、タグ登録の実行方法
直接登録、タグ登録のイベントを実行する方法は以下の方法です。
document.body.onload();
めんどくさいですが、この２つを適宜使って実行するしかないですね。
実は、登録されたイベントを削除する方法を模索してるんですが、現段階では、調べきれてないです。
これは知りたいユーザーも多いハズなので、調査完了したら、記事にしますね。
0 件のコメント:
コメントを投稿