はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

jQueryでイベントハンドラの前後に処理を追加する

jQueryイベントハンドラの前後に処理を追加する

例えば,ボタンを押したときのクリックイベントハンドラがある場合に, その前後に処理を追加するような場合のメモ.

具体的には,ボタンAをクリック -> ボタンAの処理実行のところを

  1. ダミーボタンBのクリック
  2. 前処理の実行
  3. ボタンAにclickイベントを発火して本来の処理実行
  4. 後処理の実行

を行う.

これができると,ボタンAの処理を変えたくない・変えられない場合にも処理を追加できる.

コード

ポイントは,元のボタンAをtrigger('click')でクリックイベントの発火をさせる.そしてその前後に,追加したい処理を入れる.python のdecorationのように書ける.

ボタンAの処理を以下のコードと仮定する.

$('.btn-A').on('click', function(e){
  $('.message').append("<p>click btn-A</p>");
});

新しく設置したダミーボタンのクリックイベントハンドラを以下のように書ける.

  $('.btn-B').on('click', function(e){
  $('.message').append("<p>前処理</p>");
  $('.btn-A').trigger('click');
  $('.message').append("<p>後処理</p>");
});

厳密に,ボタンAの処理後に「後処理」を実行させたい場合は,setTimeout関数などのコールバック関数を設定することでボタンAの処理後に実行させられる.

  $('.btn-B').on('click', function(e){
  // 前処理
  $('.message').append("<p>前処理</p>");

  $('.btn-A').trigger('click');

  // 後処理
  setTimeout(function(){
     $('.message').append("<p>後処理</p>");
  }, 1);
});

codepen:

See the Pen click decoration by Cartman (@Cartman0) on CodePen.

広告を非表示にする