.net column

.NET開発者のためのブログメディア

Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法

2020年12月07日

SE
Bootstrapでのテキストなどの左寄せ・中央寄せ・右寄せを教えてください。
PM
テキストやブロック要素などの左寄せ・中央寄せ・右寄せの方法を説明しますので、一緒に見ていきましょう。

jQueryでのクリックイベント on(click) の使い方を紹介します!


今回は、jQueryでのクリックイベントの使い方について説明します。

jQueryでクリックイベントを設定するには、on(click)を使用します。これと似たメソッドにclickメソッドがあります。両者の違いについて説明します。また、クリック要素の属性値取得方法や、設定したクリックイベントの削除方法についても説明します。

jQueryでのクリックイベント on(click) の使い方に興味のある方はぜひご覧ください。

基本的な使い方

onメソッドとは、対象要素にイベントを設定できるメソッドです。onメソッドを使用すれば、クリックイベントなどを実現できます。ここでは、ボタンクリックイベントを実装してみます。

HTMLを以下に記載します。

jQueryは以下のように記述します。

ボタンをクリックすると、コンソールログが出力されることが分かります。このように、onメソッドに’click’を指定することで、対象要素にクリックイベントを設定できます。

clickとon(click)の違い①

先ほどはon(click)でクリックイベントを実現しました。これと似たメソッドにclickメソッドがあります。clickメソッドとon(click)の違いを説明します。

まず、clickメソッドについて説明します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

ボタンをクリックすると、コンソールログが出力されることが分かります。on(click)と同じ結果になりましたね。on(click)とclickメソッドは何が違うのでしょうか。

clickメソッドはクリックイベントしか設定できませんが、onメソッドは複数のイベントを設定できます。

ここでは、クリックイベントとマウスムーブイベントを設定してみます。jQueryは以下のように記述します。

実行すると、ボタンクリック時とボタン上でのマウス移動時にコンソールログが出力されることが分かります。もちろん、イベントごとに処理を分けることができます。

jQueryは以下のように記述します。

ボタンクリック時とボタン上でのマウス移動時に、別のメッセージがコンソールログに出力されることが分かります。

clickとon(click)の違い②

clickメソッドとon(click)の違いはもう1つあります。on(click)では、jQueryで後から追加した要素についてもイベントを追加できます。

HTMLを以下に記載します。

jQueryは以下のように記述します。

「ボタン1」および「ボタン2」どちらをクリックしてもコンソールログが出力されることが分かります。

clickメソッドの場合を見てみましょう。

HTMLを以下に記載します。

jQueryは以下のように記述します。

この場合は、「ボタン1」クリック時のみコンソールログが出力されることが分かります。「ボタン2」をクリックしてもコンソールログは出力されません。

属性値を取得

クリックした要素の属性値を取得する方法を紹介します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

実行結果は以下のようになります。

See the Pen
jquery_onclick7
by kskumd (@kskumd)
on CodePen.


ボタンをクリックすると、data-idの値が出力されることが分かります。

イベント削除

設定したクリックイベントを削除する方法を紹介します。offメソッドを使用します。

HTMLを以下に記載します。

jQueryは以下のように記述します。

ボタンクリック時にコンソールログが出力されますが、その際クリックイベントが削除されるので、2回目以降のクリック時にはコンソールログが出力されないことが分かります。

SE
Bootstrapでの左寄せ・中央寄せ・右寄せの方法についてよく理解できました。
PM
左寄せ・中央寄せ・右寄せの方法が理解できたら、実際にソースコードを書いてみましょう。

まとめ

いかがでしたでしょうか。on(click)でのクリックイベントの設定方法や、clickメソッドとの違いについて説明しました。

また、クリック要素の属性値取得方法や、設定したクリックイベントの削除方法についても説明しました。ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)