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

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

このブログを検索

プロフィール

自分の写真
町田市, 東京都, Japan
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出。

ブログ アーカイブ

QooQ