.on()でイベントを追加しよう!

.on()でイベントを追加しよう!

.on()は、セレクタで選択した要素にイベントを追加し、コールバック関数を実行するメソッドです。

イベントの発火、キャンセル、取得、一覧については、以下の記事を参照してください。

.on()の引数は?

$('button').on('click', function() {
    alert('ボタンがクリックされました');
});

.on()でイベントを追加するには、セレクタで要素を選択し、第1引数にイベント名、第2引数にコールバック関数を渡します。

存在しない要素にイベントを追加するには?

$(document).on('click', 'button', function() {
    alert('ボタンがクリックされました');
});

第1引数にイベント名、第2引数にセレクタ、第3引数にコールバック関数を渡すこともできます。

Ajaxで追加される要素など、存在しない要素にイベントを追加する場合に使用します。

サンプルでは、documentにイベントを追加し、要素がbuttonの場合にイベントを実行します。

動作はbuttonにイベントを追加した場合と同様です。

コールバック関数の引数は?

$('button').on('click', function(event) {
    alert('x:'+event.pageX+' y:'+event.pageY);
});

第1引数にイベントの情報が格納されたオブジェクトが渡されます。

event.pageX, event.pageYは、イベントが発生した場所のdocumentから計算したx座標、y座標です。

サンプルでは、ボタンがクリックされたときに、その場所のx座標、y座標をアラートしています。

イベントハンドラの引数、イベントオブジェクト、イベントハンドラの順番の変更については、以下の記事を参照してください。

clickイベント(onclick)を追加するには?

$('button').on('click', function() {
    alert('ボタンがクリックされました');
});

clickイベントを追加するには、第1引数に’click’を渡します。

サンプルでは、ボタンをクリックしたときにアラートを表示するイベントを追加しています。

.click()を使おう!

$('button').click(function() {
    alert('ボタンがクリックされました');
});

.on(‘click’)の省略表記として、.click()を使うこともできます。

動作は.on()を使用した場合と同様です。

loadイベント(onload)を追加するには?

$(window).on('load', function() {
    alert('ロードが完了しました');
});

loadイベントを追加するには、第1引数に’load’を渡します。

第1引数に’load’を渡し、ページのロードが完了したときにアラートを表示しています。

.load()を使おう!

$(window).load(function() {
    alert('ロードが完了しました');
});

.on(‘load’)の省略表記として、.load()が使用できます。

changeイベント(onchange)を追加するには?

<input type="checkbox" />
$('input').on('change', function() {
    alert('変更されました');
});

changeイベントを追加するには、第1引数に’change’を渡します。

サンプルでは、チェックボックスの状態が変更されたときに、アラートを表示しています。

ラジオボタン、select要素でも同様の動作になります。

テキストフィールド、テキストエリアのchangeイベントは?

<input type="text" value="value" />
$('input').on('change', function() {
    alert('変更されました');
});

テキストフィールド、テキストエリアのchangeイベントは、他の要素をクリックする等、フォーカスが外れたときに発生します。

例えば、サンプルのフィールドに’value-changed’を入力した場合、フォーカスが外れた時点でアラートが表示されます。

入力中にイベントを発生させるには?

$('input').on('input', function() {
    console.log('変更されました');
});

入力中にイベントを発生させるには、inputやkeyupイベントを使用します。

hoverイベントを追加するには?

$('input').on('mouseenter', function() {
    console.log('ホバーを開始しました');
});

$('input').on('mouseleave', function() {
    console.log('ホバーを終了しました');
});

ホバーの開始にはmouseenterイベント、ホバーの終了にはmouseleaveイベントを使用します。

要素の表示領域にマウスが侵入したときにmouseenterイベントが発生し、領域外に出たときにmouseleaveイベントが発生します。

サンプルでは、ホバーの開始、終了時に各々コンソール出力しています。

.mouseenter(), .mouseleave()を使おう!

$('input').mouseenter(function() {
    console.log('ホバーを開始しました');
}).mouseleave(function() {
    console.log('ホバーを終了しました');
});

省略表記として、.mouseenter(), .mouseleave()が使用できます。

サンプルでは、メソッドチェーンで要素の選択を省略しています。

.hover()を使おう!

$('input').hover(function() {
    console.log('ホバーを開始しました');
}, function() {
    console.log('ホバーを終了しました');
});

.hover()の第1引数にmouseenterイベント、第2引数にmouseleaveイベントに対応するコールバック関数を入力することで、同じ処理を実装できます。

短い処理の場合は、コードがすっきりするのでおすすめです。

複数のイベントを追加するには?

$('input').on('change input', function() {
    console.log('変更されました');
});

複数のイベントを追加するには、イベント名をスペース区切りで渡します。

サンプルでは、change, inputの各イベントが発生した場合、コンソール出力しています。

.one()で一回限りのイベントを追加しよう!

$('button').one('click', function() {
    alert('ボタンがクリックされました');
});

.one()を使用することで、一回だけ実行されるイベントを追加できます。

使い方は.on()と同様ですが、初回のイベントが実行された後、二回目以降のイベントは発生しません。

サンプルでは、ボタンをクリックするとアラートが表示されますが、二回目以降は何も表示されません。

.off()でイベントを削除しよう!

$('button').off();

.on()で登録したイベントを.off()で削除できます。

$('button').off('click');

第1引数にイベント名を渡すことで、特定のイベントのみを削除できます。

サンプルでは、ボタンのclickイベントのみを削除しています。

まとめ

  • .on()の第1引数はイベント名、第2引数はセレクタ、第3引数はコールバック関数で、第2引数は省略できます。
  • onclickはclick, onloadはload, onchangeはchangeをイベント名に渡します。
  • hoverイベントはmouseenter, mouseleaveイベントを使います。
  • 複数のイベントを追加するには、イベント名をスペース区切りで入力します。
  • .one()で一回限りのイベントを追加できます。
  • .off()でイベントが削除できます。

メソッドカテゴリの最新記事