.on() メソッドと .trigger() メソッド
jQuery の .on() メソッドは、指定した要素に対して任意のイベントをバインドします。
また、.trigger() メソッドを利用することで、その要素にバインドされたイベントを任意のタイミングで発生させることができます。
JavaScript
$('body').on('click', function() {
console.log('<body>がクリックされました');
});
$('body').trigger('click'); // '<body>がクリックされました'
カスタムイベントの利用
これらのメソッドでは、'click'
、'scroll'
、'mouseenter'
といった標準的なイベントタイプだけではなく、独自のイベントタイプを定義して利用することも可能です。
「Webページ上で起こる何らかの状態変化を独自のイベントとして定義し、そのイベントを引き金(trigger)として複数の処理を実行する」といった利用方法が考えられます。
JavaScript
$(window).on('myEvent', function() {
// 'myEvent' が発生した時に実行したい処理
// ...
// funcA();
// funcB();
});
function exampleFunction() {
// ...
// 任意のタイミングで 'myEvent' を発生させる
$(window).trigger('myEvent');
}