.NET開発者のためのブログメディア
Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法
目次
jQueryでのクリックイベント on(click) の使い方を紹介します！
今回は、jQueryでのクリックイベントの使い方について説明します。
jQueryでクリックイベントを設定するには、on(click)を使用します。これと似たメソッドにclickメソッドがあります。両者の違いについて説明します。また、クリック要素の属性値取得方法や、設定したクリックイベントの削除方法についても説明します。
jQueryでのクリックイベント on(click) の使い方に興味のある方はぜひご覧ください。
基本的な使い方
onメソッドとは、対象要素にイベントを設定できるメソッドです。onメソッドを使用すれば、クリックイベントなどを実現できます。ここでは、ボタンクリックイベントを実装してみます。
HTMLを以下に記載します。
|
1 |
<button>ボタン</button> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 |
$(function() { // ボタンクリック時 $('button').on('click', function() { console.log('buttonがクリックされました'); }) }); |
ボタンをクリックすると、コンソールログが出力されることが分かります。このように、onメソッドに’click’を指定することで、対象要素にクリックイベントを設定できます。
clickとon(click)の違い①
先ほどはon(click)でクリックイベントを実現しました。これと似たメソッドにclickメソッドがあります。clickメソッドとon(click)の違いを説明します。
まず、clickメソッドについて説明します。
HTMLを以下に記載します。
|
1 |
<button>ボタン</button> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 |
$(function() { // ボタンクリック時 $('button').click(function() { console.log('buttonがクリックされました'); }) }); |
ボタンをクリックすると、コンソールログが出力されることが分かります。on(click)と同じ結果になりましたね。on(click)とclickメソッドは何が違うのでしょうか。
clickメソッドはクリックイベントしか設定できませんが、onメソッドは複数のイベントを設定できます。
ここでは、クリックイベントとマウスムーブイベントを設定してみます。jQueryは以下のように記述します。
|
1 2 3 4 5 6 |
$(function() { // ボタンクリックまたはマウス移動時 $('button').on('click mousemove', function() { console.log('buttonイベント発生！'); }) }); |
実行すると、ボタンクリック時とボタン上でのマウス移動時にコンソールログが出力されることが分かります。もちろん、イベントごとに処理を分けることができます。
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $('button').on({ // クリック時 'click': function() { console.log('buttonがクリックされました'); }, // 移動時 'mousemove': function() { console.log('button上で移動されました'); } }); }); |
ボタンクリック時とボタン上でのマウス移動時に、別のメッセージがコンソールログに出力されることが分かります。
clickとon(click)の違い②
clickメソッドとon(click)の違いはもう1つあります。on(click)では、jQueryで後から追加した要素についてもイベントを追加できます。
HTMLを以下に記載します。
|
1 2 3 |
<div> <button>ボタン1</button> </div> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 |
$(function() { // ボタンクリック時 $('div').on('click', 'button', function(){ console.log('buttonがクリックされました'); }); // buttonの追加 $('div').append('<button>ボタン2</button>'); }); |
「ボタン1」および「ボタン2」どちらをクリックしてもコンソールログが出力されることが分かります。
clickメソッドの場合を見てみましょう。
HTMLを以下に記載します。
|
1 2 3 |
<div> <button>ボタン1</button> </div> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 |
$(function() { // ボタンクリック時 $('button').click(function(){ console.log('buttonがクリックされました'); }); // buttonの追加 $('div').append('<button>ボタン2</button>'); }); |
この場合は、「ボタン1」クリック時のみコンソールログが出力されることが分かります。「ボタン2」をクリックしてもコンソールログは出力されません。
属性値を取得
クリックした要素の属性値を取得する方法を紹介します。
HTMLを以下に記載します。
|
1 2 3 4 5 6 |
<div> <button data-id='data1'>button1</button> <button data-id='data2'>button2</button> <button data-id='data3'>button3</button> </div> <p></p> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 |
$(function() { // buttonのクリック時 $('button').on('click', function(){ // 属性値を取得 let data = $(this).data('id'); // 結果表示 $('p').text(data); }); }); |
実行結果は以下のようになります。
See the Pen
jquery_onclick7 by kskumd (@kskumd)
on CodePen.
ボタンをクリックすると、data-idの値が出力されることが分かります。
イベント削除
設定したクリックイベントを削除する方法を紹介します。offメソッドを使用します。
HTMLを以下に記載します。
|
1 |
<button>ボタン</button> |
jQueryは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 |
$(function() { // ボタンクリック時 $('button').on('click', function() { console.log('buttonがクリックされました'); // クリックイベントを削除 $('button').off("click"); }) }); |
ボタンクリック時にコンソールログが出力されますが、その際クリックイベントが削除されるので、2回目以降のクリック時にはコンソールログが出力されないことが分かります。
まとめ
いかがでしたでしょうか。on(click)でのクリックイベントの設定方法や、clickメソッドとの違いについて説明しました。
また、クリック要素の属性値取得方法や、設定したクリックイベントの削除方法についても説明しました。ぜひご自身でソースコードを書いて、理解を深めてください。
