【完全版】jQueryでクリックイベントを処理する3つの方法！.on() vs .click() vs ネイティブJS

2024-04-02

jQueryの on('click') と click() はどちらも要素のクリックイベントに処理を割り当てるメソッドですが、いくつかの重要な違いがあります。

イベントの対象

click(): 既存の要素のみを対象とする。
on('click'): 既存の要素だけでなく、今後追加される要素にもイベント処理を割り当てることができる。

click(): クリックイベントのみを処理する。
on('click'): クリックイベント以外にも、様々なイベントを処理できる。

イベント処理の解除

click(): off('click') を使ってイベント処理を解除する。
on('click'): イベント名とセレクターを指定して off() を使ってイベント処理を解除する。

その他

on('click') はより柔軟なイベント処理が可能だが、コード量が少し多くなる。
click() はシンプルでコード量が少ないが、今後追加される要素にはイベント処理を割り当てることができない。

例

<button id="button">ボタン</button>

// 既存の要素のみを対象とする
$('#button').click(function() {
  console.log('クリックされました');
});

// 既存の要素と今後追加される要素を対象とする
$(document).on('click', '#button', function() {
  console.log('クリックされました');
});

既存の要素のみを対象とする場合は click() を使う。
既存の要素だけでなく、今後追加される要素にもイベント処理を割り当てたい場合は on('click') を使う。
イベント処理を解除する場合は、off() メソッドを使う。

<button id="button">ボタン</button>

<script>
// ボタンクリック時にメッセージを表示
$('#button').click(function() {
  alert('ボタンがクリックされました');
});
</script>

既存の要素と今後追加される要素を対象

<div id="container">
  <button class="button">ボタン1</button>
</div>

<script>
// 現在の要素と今後追加される .button 要素のクリック時にメッセージを表示
$(document).on('click', '.button', function() {
  alert('ボタンがクリックされました');
});

// 新たにボタンを追加
$('#container').append('<button class="button">ボタン2</button>');
</script>

<button id="button">ボタン</button>

<script>
// ボタンクリック時にメッセージを表示
var clickHandler = function() {
  alert('ボタンがクリックされました');
};

$('#button').click(clickHandler);

// イベント処理を解除
$('#button').off('click', clickHandler);
</script>

クリックイベント以外に、マウスオーバーイベントやキーダウンイベントなどにもイベント処理を割り当てることができます。
複数のイベントを同時に処理したい場合は、on() メソッドに複数のイベント名をカンマ区切りで指定することができます。

jQueryで要素のクリックイベントに処理を割り当てる他の方法

ネイティブ JavaScript

<button id="button">ボタン</button>

<script>
// ボタンクリック時にメッセージを表示
var button = document.getElementById('button');
button.addEventListener('click', function() {
  alert('ボタンがクリックされました');
});
</script>

イベントリスナーを直接要素に設定することもできます。

<button id="button">ボタン</button>

<script>
// ボタンクリック時にメッセージを表示
document.getElementById('button').onclick = function() {
  alert('ボタンがクリックされました');
};
</script>