jQueryでのクリックイベント on(click) の使い方とは？offメソッドについても紹介！
- システム
エンジニア - jQueryでのクリックイベントの使い方を教えてください。
- プロジェクト
マネージャー - jQueryでクリックイベントを設定するには、on(click)を使用します。
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回目以降のクリック時にはコンソールログが出力されないことが分かります。
- システム
エンジニア - jQueryでのクリックイベント on(click) の使い方やclickとon(click)の違いなどが理解できました。
- プロジェクト
マネージャー - jQueryでのクリックイベント on(click) の使い方を理解するためには実践することも大切です。実際にソースコードで指定してみましょう。
まとめ
いかがでしたでしょうか。on(click)でのクリックイベントの設定方法や、clickメソッドとの違いについて説明しました。
また、クリック要素の属性値取得方法や、設定したクリックイベントの削除方法についても説明しました。ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryのloadとは？loadの使用方法やjQueryを使わずにloadを行う方法を紹介
jQueryのloadとは？ jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つであるloadは、自ページとは別のtxtページやhtmlページを読み込んで表示することができる機能です。複 […]
-
jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！
jQueryでのValidationの使い方を紹介します 今回は、jQueryでのValidationの使い方について説明します。 Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須 […]
-
jQueryのif文を基本から解説！文法をマスターしよう！
jQueryのifとは？ jQueryは多機能なフリーのライブラリです。 jQueryは言語ではなくJavaScriptのライブラリであるため、jQueryで使用するif文はJavaScriptのif文と全く同じと言えま […]
-
JavaScriptでのsubstringメソッドを使用した文字列の切り出し方
JavaScriptでのsubstringメソッドの使い方とは？ 今回は、JavaScriptでのsubstringメソッドを使用した文字列の切り出し方について説明します。 文字列から必要な部分のみを切り出すことはよくあ […]
-
JavaScriptでのStringの使い方｜各メソッドをコード付きで紹介
JavaScriptでのStringの使い方とは？ 今回は、JavaScriptでの文字列（String）の使い方について説明します。JavaScriptでは、文字列をダブルクォーテーション（”）で囲みます。 […]
