プロクラスの森です。
jQueryのイベント発行方法について、trigerがすごく便利だったのでメモです。
目次
$(window).trigger(‘resize’)
JQueryで各要素をグリッド上に整列させるページを触っていた時、ページを表示したときにうまく整列されない…という状況になりました。
ブラウザをリサイズさせるとリサイズイベントが発火して無事整列するのですが、最初にページを開いたときの初期化がうまくいかずという状況でした。
JQueryのtrigerを使って、ページ読み込み時にリサイズを起こしてやることでひとまず解決しました。
$(document).ready(function() { $(window).trigger('resize') });
下記はリサイズ時にブラウザの横幅を取得するサンプルですが、読み込み時はtrigerイベントでresizeを起こして取得しています。
$(“xxx”).trigger(‘click’);
クリックも起こせるので、ボタンクリックで動作するプラグインを読み込み時にも動かしたい時にも使えます。
プラグイン作者がハンドラを用意してくれていないタイミングでイベントを起こしたい時には便利。
$(document).ready(function() { $("#btn").trigger('click'); });
サンプルでは読み込み時にURL末尾の#（ハッシュタグ）を取得して、ボタンクリックと同じイベントを、trigerイベントで起こしています。
「該当する関数を呼び出せば同じこと」という指摘はもっともなのですが、頭の良い人達が作ったプラグインを使う時、プラグインのjsファイルの中の関数部分を探すのは結構大変だったりするので…
プラグインによっては、中を見ても全く分からん…とか、これっぽいけど引数の渡し方が高度すぎて呼び出せない…とかになります。（打ちのめされます）
余談ですが読み込み時の書き方でも詰まったのでメモ…
読み込み時のイベントの書き方
$(document).readyと$(window).on(“load”があるので、どちらを使うかでよく迷います。
どちらでもいけるケースも多いですが、実行タイミングに差があるので、詰まったらチェックすると良いかも。
下記サイトが詳しいです。 https://qiita.com/katsunory/items/3ba4683629333b94b2be
jQueryのverによる違い
$(window).load(function(){
を使う場合は、jQuery3.0以降は書き方が↓に変わっているので注意。
$(window).on("load",function(){
下記のサイトが詳しいです。
https://wemo.tech/109
https://9-bb.com/jquery-7/
詰まったら、JQueryのverもチェックすると良いかもです。