JQueryを使って一つのイベントハンドラで複数の関数を実行したい。

Question

発生している問題

幾つかのテキストボックスの入力内容を、入力時と送信ボタン押下時の2パターンで検査したいとき、
送信ボタンを押したときに4つの関数を一つのイベントハンドラで呼び出すにはどうすればよいでしょうか。

該当のソースコード

const checkNo = function(){// 処理}
const checkName = function(){// 処理}
const checkSex = function(){// 処理}
const checkMail = function(){// 処理}

$(function () {	
　$("#No").on('blur keypress', checkNo);
　$("#Name").on('blur keypress', checkName);
　$("#Sex").on('blur keypress', checkSex);
　$("#Mail").on('blur keypress', checkMail);

  $("#btn").on(
    'click', checkNo, checkName, checkSex, checkMail
  );
});

試したこと

送信ボタン4つ分の同じclickイベントハンドラを書いてそこに各々の関数呼び出しを記述すれば機能自体は満たせるのですが、すごい冗長でスマートでないなぁと・・・
一つのイベントハンドラに纏める方法があれば教えて欲しいです。

Comments

[jun68ykt]

こんにちは。回答を考えてコードを書きました。https://jsfiddle.net/jun68ykt/enxzrfq1/70/ これは4つのテキストと1つのボタンの計５個の <input /> の click イベントを一つのイベントハンドラで処理します。 ですが、実現されたいことは、ボタンのクリックハンドラで４つの関数をまとめたいということだったのですね。質問の趣旨を勘違いしていたようです。

[SaganoKei]

いえ、ソースコード見せていただきましたが、自分の引き出しにない書き方ばかりですごく勉強になりました！　もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

[jun68ykt]

「自分の引き出しにない書き方ばかりですごく勉強になりました！」とのことでよかったです！「もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。」との件については、長くなりそうだったので回答欄のほうに返答を書きました。

Answer 1

  $("#btn").on(
    'click', function() {
       checkNo();
       checkName();
       checkSex();
       checkMail();
    }
  );

Comments

[SaganoKei]

回答ありがとうございます

その方法で書いてみたこともあったんですけど、なぜかその時は失敗したんですよね・・・なんでだろう
ともかく書き直したらちゃんと動いたので助かりました！

Answer 2

こんにちは。

「質問への追記・修正、ベストアンサー選択の依頼」欄のほうで

もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

とのご要望を頂きましたので、以下にて５点ほどピックアップして回答します。

(1) Shorthand method names (ES2015)

オブジェクトのプロパティで、関数であるもの

const checkers = {
    Mail: function() { return 'OK'; }
};

を

const checkers = {
    Mail() { return 'OK'; }
};

と詰めて（=shorthand）書けます。これは MDN: オブジェクト初期化子 の中のShorthand method names (ES2015) です。

(2) first-class object

元のご質問にあるコード

const checkNo = function(){// 処理}
const checkName = function(){// 処理}
const checkSex = function(){// 処理}
const checkMail = function(){// 処理}

だったり、

const checkers = {
    Mail() { return 'OK'; }
};

のように関数を、const checkNo に代入したり、オブジェクトcheckers のプロパティとして書けます。
これは JavaScript の関数が第一級オブジェクトであるからです。

JavaScript において、関数は第一級オブジェクトです。すなわち、関数はオブジェクトであり、他のあらゆるオブジェクトと同じように操作したり渡したりする事ができます。具体的には、関数は Function オブジェクトです。

以上、MDN: 関数と関数スコープ より引用

(3) Object.entries()

      const result = 
        Object.entries(checkers)
              .reduce((r,e) => { r[e[0]] = e[1](); return r; } ,{});

と書いているところで、 Object.entries() を使っています。これはES2017で標準になっています。

(4) Array.prototype.reduce()

上記 (3) のコードで Array.prototype.reduce() を使っています。使いこなせると便利な関数です。

(5) ES2016, 17, 18 で導入された新しい関数、書き方等について

私は、

• Here are examples of everything new in ECMAScript 2016, 2017, and 2018　

を、一通り読んで、動かして確認できるものは簡単なコードを書いてみたうえで、
ブックマークに入れていますが、日本語だとYuta Yamamotoさん@qiita の

• ES2016 / ES2017で実装される機能まとめ
• ES2018で追加される機能まとめ

が分かりやすいです。

　

さて、以上(1)から（５）までトピックを挙げましたが、「質問への追記・修正、ベストアンサー選択の依頼」欄で頂戴した、

もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

とのご要望に、個々の点では回答できているけれども、より本質的に求められていることの
回答には全くなっていない気もしています。

というのは、そもそも元のご質問の「該当のソースコード」を見たときに、「質問への追記・修正、
ベストアンサー選択の依頼」に挙げましたコード （※これがベストなリファクタ案とは思っていませんが。）にリファクタできる、または、コードを書き始める以前に、「こういう風に書ける or 書き直せるはず。やってみよう」と着想できるようになるためにはどうしたらいいか？
という問いこそが、

もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

というご要望の真意であるとすれば、上記５点に並べた個々の、言ってしまえば、断片的な知識を
「ふ〜ん。そうなんだ。」みたいな感じで知っていても、（物知りにはなれるでしょうけれど、）

先のソースコードの書き方を学ぶ

こと （の、必要条件ではあるかもしれないが、十分条件)には、多分なっていないからです。

上記の懸念はありますが、とりあえず以上を一次回答とさせていただき、
さらなる疑問点などありましたら、ご質問頂ければと思います。