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

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

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

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

を行う．

これができると，ボタン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.