【jQuery】click()を使って要素をクリックした時に処理を行う!

要素をクリックした時に処理を行うにはjQueryのclick()メソッドを使用します。

jQueryのclick()メソッドとは要素がマウスによるクリック操作を行うことで、イベント処理を実行するメソッドであり、基本的には画面に配置されている「ボタン」をクリックする時によく使用されます。

ボタンをクリックする時によく使用されることから、click()メソッドはjQueryではよく使われるメソッドです。
しかし、覚えると簡単に使用できますのでここで学習しておきましょう。

今回は、jQueryのclick()メソッドを使ってクリックした時に処理を行う方法について以下の内容で解説していきます。

⚫︎ クリック処理時にイベント処理を行う場合
⚫︎ クリック処理時にデータの受け渡しを行う場合

⚫︎ jQueryを使用せずに指定した要素を削除する場合
⚫︎ パラメータ無しでclick()を使用する場合

ハルトさん

今回はjQueryのclick()メソッドでクリックした時に処理を行う方法について説明していきます。

さとみさん

お願いします!

click()とは

click()とは、要素がマウスによるクリック操作を行うことで、イベント処理を実行するメソッドとなります。

click()の書き方

click()メソッドの書き方は下記となります。

パラメータ

⚫︎ イベントデータ:
イベントオブジェクトに渡すデータを指定する
(変数やマップ値のようにオブジェクトリテラル式で指定)
⚫︎ イベントハンドラ:
クリックしたときのイベントを指定する

click()のパラメータにイベントハンドラを指定することで、要素をクリックした時に指定したイベント処理を行うことができます。
また、パラメータにイベントデータを指定することで指定したイベントハンドラにデータを渡すことができます。

クリックした時に処理を行うサンプルコード

click()でクリックした時に処理を行うサンプルコードを紹介します。

クリック処理時にイベント処理を行う場合

クリック処理時にイベント処理を行う場合はclick()のパラメータにイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

click()にイベントハンドラを指定することでクリック後にイベント処理を行っています。
そのため、ボタンを押すと指定したoutクラスに文字列が表示され、sampleクラスの背景色が変更されています。

クリック処理時にデータの受け渡しを行う場合

クリック処理時にデータの受け渡しを行う場合はclick()のパラメータにイベントデータを指定します。

sample.html

style.css

index.js

出力結果

click()のパラメータにイベントデータを指定することでクリック処理時にデータの受け渡しを行っています。
そのため、text変数のデータがクリック処理時に表示されています。

さとみさん

click()のパラメータにイベントデータを指定することでクリック処理時にデータの受け渡しを行うことができるのですね!

ハルトさん

そうですね。
サンプルコードでは、変数のデータを表示していますが、
let obj = {old: 50 ,name: ‘Haruto’}のようなマップ値のデータの受け渡しも可能ですよ。

jQueryを使用せずにクリックした時に処理を行う場合

jQueryを使用せず純粋なJavaScriptでクリックした時に処理を行ってみます。

sample.html

style.css

index.js

出力結果

純粋なJavaScritを使用して、クリックした時に処理を行っています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

パラメータ無しでclick()を使用する場合

パラメータ無しでclick()を使用してみます。

sample.html

style.css

index.js

出力結果

click()を呼び出しただけなのでbtn1クラスのボタンをクリックしても処理は行われません。

しかし、パラメータ無しのclick()は下記のコードのように使用することができます。

sample.html

style.css

index.js

出力結果

btn1のclick()内でbtn2クラスのclick()を呼び出すことで、btn1クラスをクリックするとbtn2クラスもクリックしたことになります。
そのため、クリック1のボタンを押すと、クリック2のボタンも押したこととなりsampleクラスの背景色が変更されます。

さとみさん

click()はパラメータ無い場合でも指定したセレクタのクリック処理があれば処理が行われるのですね!

ハルトさん

そうですね。
サンプルコードでは、クリック1のclick()のイベントハンドラ内でクリック2のclick()を実行しています。
これにより、クリック1を押した時にクリック2を押していなくても押されているようになります。

今回のポイント

click()でクリック処理を行う

⚫︎ 要素をクリックした時に処理を行うにはjQueryのclick()メソッドを使用する

⚫︎ クリック処理時にイベント処理を行う場合はclick()のパラメータにイベントハンドラ(関数)を指定する

⚫︎ クリック処理時にデータの受け渡しを行う場合はclick()のパラメータにイベントデータを指定する

⚫︎ click()はパラメータ無い場合はクリック処理は行われないが、指定したセレクタのクリック処理がある状態で、別の要素からclick()が呼び出されている状態だと処理が行われる

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し