jQuery: $().click(fn) と $().bind('click',fn); の違い

jQuery: $().click(fn) vs. $().bind('click',fn); の違い

• どちらも同じ動作をするように見えますが、いくつかの重要な違いがあります。
• $().click(fn) と $().bind('click',fn) はどちらも、要素にクリックイベントハンドラを割り当てるために使用されます。

詳細

イベントタイプ

• $().click(fn) は、クリックイベントのみを処理します。

ネームスペース

• ネームスペースを使用すると、異なるイベントハンドラを区別することができます。
• $().bind('click',fn) は、イベントハンドラにネームスペースを使用できます。

デフォルトアクション

• デフォルトアクションを阻止すると、リンクの遷移などが抑制されます。
• $().bind('click',fn) は、イベントのデフォルトアクションを阻止します。

バージョン

• $().bind('click',fn) は、jQuery 1.4 から使用できます。

推奨度

• 代わりに、$().on('click',fn) を使用するべきです。
• $().click(fn) と $().bind('click',fn) は、jQuery 3.0 で非推奨になりました。

• どちらを使用するかは、状況によって異なります。

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

$().bind('click',fn)

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

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

各コードの説明

• $().on('click',fn) は、jQuery 3.0 で推奨されている方法です。
• $().click(fn) と $().bind('click',fn) は、同じように動作します。
• 上記のコードは、いずれもボタンがクリックされた時にアラートを表示します。

• jQuery 3.0 から推奨されている方法です。
• 上記の例で紹介した方法と同じです。

$('selector').live('click', function() { ... });

• 新しいバージョンの jQuery では使用 しない でください。
• jQuery 1.9 で非推奨になり、jQuery 3.0 で削除されました。
• 過去のバージョンの jQuery で使用されていた方法です。

• 特定の状況で役立つ場合があります。
• イベントの発生時に、親要素から子要素へイベントを伝播させることができます。
• イベントの委譲を使用するものです。

$(document).ready(function() { ... });

• DOMContentLoaded イベントが発生した時に実行されるコードを記述します。

イベントオブジェクトを使用する

• イベントの種類、発生した要素、マウスの位置などを取得できます。
• イベントオブジェクトを使用すると、イベントに関する情報を取得することができます。