[Javascript] onloadイベントを強制実行する方法

2017/02/26

Javascript テクノロジー プログラミング

t f B! P L
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(); めんどくさいですが、この2つを適宜使って実行するしかないですね。 実は、登録されたイベントを削除する方法を模索してるんですが、現段階では、調べきれてないです。 これは知りたいユーザーも多いハズなので、調査完了したら、記事にしますね。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ