jQueryでオブジェクトにイベントを動的に設定する

Question

jQueryでonイベントを動的に設定することは出来るでしょうか。

設定したいこと

    $("#idObject")
      //イベント
      .on('event_1', func_1())
      .on('event_2', func_2())
      .on('event_3', func_3())

関数

    //イベント関数
    let func_1 = function(){};
    let func_2 = function(){};
    let func_3 = function(){};

    //イベント名と関数の配列
    let aryEvent = [  {event : "event_1", function : func_1}
                    , {event : "event_2", function : func_2}
                    , {event : "event_3", function : func_3}];

    //イベントを動的に設定する関数
    setEvent("idObject", aryEvent);

    //設定したい内容    
    $("#idObject")
      //イベント
      .on('event_1', func_1)
      .on('event_2', func_2)
      .on('event_3', func_3)

イベントの数と内容が動的に変わるので、配列にして登録しています。

Comments

[maisumakun]

{"event_1", func_1}が文法的に正しくないですが、配列のつもりでしょうか、オブジェクトのつもりでしょうか。

[uer03108]

申し訳ありません。連想配列です。修正いたしました。

Answer 1

とりあえずコールバックはカッコを付けないで処理してください

 $("#idObject")
      .on('event_1', func_1)
      .on('event_2', func_2)
      .on('event_3', func_3)

もしくは、オブジェクトとして列記する

 $("#idObject")
      .on({
        'event_1':func_1,
        'event_2':func_2,
        'event_3':func_3,
       });

Comments

[uer03108]

有難うございました。
まとめて、記述できるんですね。

https://qiita.com/shizuma/items/d561f37f864c3ebb5096