jQueryイベントを画面ロード時と入力時に発火させる方法

Question

Web画面でinputボックスに
何も入力されていなければ「赤色」
入力されれば「緑色」
になるような簡単なものをjQueryで作ろうとしております。

発火タイミングは
→ 1.画面がロードされたとき(load)
→ 2.inputボックスからカーソルが外れた時(blur)

非常に簡単だと思われるのですが
js STUDIO
こちらのページだとloadの使用が非推奨と記載されています。

通常loadは使われていないのでしょうか？
また画面ロード時と入力イベントを一緒に記述するために
どのように実装されていらっしゃるのか
教えて頂けると非常に助かります。

よろしくお願い致します。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

Answer 1

こんな感じでやればload自体あまり使うことはないと思います
(最初に呼ばれた際にchangeを発行してやる)

<script>
$(function(){
  $('input').on('change input',function(){
    $(this).css({"background-Color":($(this).val()!=="")?"#ff0000":"#00ff00"});
  }).change();
});
</script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>

Comments

[allll]

早急にご回答頂き、ありがとうございます。

changeイベントを初期に発行させてしまえばいいのですね！
こちらでも期待した動作をさせることができスッキリしました^^
ありがとうございました！

Answer 2

結論を言うと、

$(window).on('load', () => {
  /* Code */
});

// 以後、
// () => {}
// は、
// function() {}
// に読み替えてください。。

これでOKです。
こちらは画像などのリソースが全て読み込まれた段階で発火しすので、
DOM生成後で良いのであれば、

$(function() {
  /* Code */
});

// ES2015であれば
$(() => {
  /* Code */
});

が望ましいでしょう。

イベントリスナの登録について

jQueryでイベントリスナを登録する方法は、
たとえばクリックであれば、

$(el).click(() => {
  /* Code */
});

のようにメソッドを用いる方法と、

$(el).on('click', () => {
  /* Code */
});

のようにonメソッドを用いる方法があります。
loadメソッドとしては非推奨となりましたので、
loadイベントを使いたい場合はonメソッドで登録しましょう！
ということです。

Comments

[allll]

ご回答頂き、ありがとうございました。