【jQuery】click()で要素のクリック時に処理を行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年08月05日に投稿されました。)

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

jQueryのclick()とは、クリックイベントが発生した際に処理を実行するメソッドになります

そのため、PCではボタンをクリックしたり、スマホではボタンをタッチしたりすることで、クリックイベントが発生します。

WEBページではクリックする機会が多いことから、click()メソッドはjQueryではよく使われるメソッドです。

そのため、覚えると簡単に使用できますのでどのような仕組みなのか学習しておきましょう。

今回は、jQueryのclick()で要素のクリック時に処理を行う方法について紹介していきます。

この記事はこんな方におすすめ

オブジェクトをクリックした時に処理を行いたい場合

click()とは

click()とはクリックイベントが発生した際に処理を実行するよう設定できるメソッドとなります。

クリックイベントであるため、ユーザがマウスでボタンをクリックしたり、スマホでボタンをタッチした際に発生します。

click()の書き方

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

セレクタの後ろにclick()を追記し、必須な引数を1つを指定することで実行することができます。

また、任意な引数を1つ追加して指定することもできます。

click()の引数

click()の引数は下記のようになります。

  1. イベントデータ(任意):
    イベントオブジェクトに渡すデータを指定する
    (変数やマップ値のようにオブジェクトリテラル式で指定)
  2. イベントハンドラ(必須):
    クリックしたときのイベントをコールバック関数で指定する

イベントハンドラを指定することで、要素をクリックした時に指定したイベント処理を行うことができます。

また、イベントデータも指定することで指定したイベントハンドラにデータを渡すことができます。

click()で要素のクリック時に処理を行うサンプルコード

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

ここでは下記の2パターンでclick()を使用します。

  1. イベントハンドラを設定してクリック時に処理を行う場合
  2. イベントハンドラを設定しないでクリック時に処理を行う場合

イベントハンドラを設定してクリック時に処理を行う場合

イベントハンドラを設定してclick()を使用すると、クリック時に処理が行われます。

● index.html

● style.css

● main.js

実行結果

click()でイベントハンドラを設定してクリック時に処理を行った結果

click()によって要素のクリック時に処理を行っています。

そのため、要素をクリックすると大きさと色が変化しています。

イベントハンドラを設定しないでクリック時に処理を行う場合

イベントハンドラを設定しない場合にclick()を使用すると、クリック時に処理が行われません。

● index.html

● style.css

● main.js

実行結果

click()でイベントハンドラを設定しないでクリック時に処理を行った結果

click()によって要素のクリック時に処理を行っています。

今回はclick()の後にイベントハンドラを設定していないため、クリックしても何も処理が行われません。

click()で要素のクリック時にデータの受け渡しを行う場合

click()でクリック時にイベント処理を行う場合は引数に「イベントデータ」を指定します。

イベントデータを指定することで、クリック時にデータの受け渡しを行うことができます。

● index.html

● style.css

● main.js

実行結果

click()で要素のクリック時にデータの受け渡しを行った結果

click()で要素のクリック時にデータの受け渡しを行っています。

そのため、ボタンをクリックするとオブジェクトの値が画面に表示されています。

Sossy

サンプルコードでは、オブジェクトのデータを表示していますが、
「let name =’Sossy’」のような変数のデータの受け渡しも可能です。

click()に引数を指定しないで使用する方法

引数を指定しないでclick()を使用するには、下記の方法があります。

● index.html

● style.css

● main.js

実行結果

click()で引数を指定しないで使用した結果

btnのclick()内にclick()を呼び出しているため、btnクラスのボタンをクリックすることでクリック処理が発生したことになります。

そのため、クリックのボタンを押すと、大きさが変化しますが、「sample」クラスのボタンも押したことになるため背景色も変更されています。

click()を使用する際の注意点

先ほどまでclick()について紹介してきましたが、使用する際にあたって注意すべき点があります。

それは、静的なオブジェクトのみが対象であり、動的なオブジェクトは対象外となるということです。

例えば、下記のようにボタンを押して要素を追加し、要素をクリックすると背景色が変化するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

click()で要素を作成し、クリックすると背景色が変化するコードを作成した結果

既に作成されていた2つの要素をクリックすると背景色が変換していますが、jQueryによって作成された要素をクリックしても背景色が変化していないということがわかります。

つまり、click()は静的なオブジェクトのみが対象となります。

Sossy

click()はページを読み込んだ際に作成される要素に対してクリック時の処理を設定することができます。
そのため、ページ読み込み後に作成される要素に対してはクリックイベントが発生しませんので注意してください。

click()を使用した実際のケース

click()を使用した実際のケースについてご紹介します。

例えば、ユーザがボタンをクリックしたり、コード上の操作で処理が発生するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

click()でユーザがボタンをクリックしたり、コード上の操作で処理が発生するようなコードを作成した結果

click()によって、クリックした時の処理を行っています。

そのため、ボタンをクリックすることで、非表示になっていたニューが表示されるようになります。

また、ダイヤログ画面で「はい」を押すと、非表示状態のボタンにクリックイベントが発生して、当ブログのTopページが表示されています。

Sossy

click()はユーザーから操作されるクリックイベントとコードで操作されるクリックイベントのどちらでも対応することができます。

jQueryで要素のクリック時に処理を行うメソッドの一覧

jQueryではclick()以外にも要素のクリック時に処理を行うことができるメソッドが存在します。

そのため、ここではjQueryで要素のクリック時に処理を行うことができるメソッドの一覧についてご紹介します。

on()

on()とは、要素にイベント処理を設定することができるメソッドになります。

そのため、「clickイベント」を設定することで要素のクリック時に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

on()で要素のクリック時に処理を行った結果

on()によって要素のクリック時に処理行っています。

そのため、ボタンをクリックすると要素の背景色が黄色に変更されています。

もし、on()について詳しく知りたい場合は下記の記事をご参考ください。

bind()

bind()とは、要素にイベントを紐づけるメソッドになります。

そのため、こちらも「clickイベント」を設定することで要素のクリック時に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

bind()で要素のクリック時に処理を行った結果

bind()によって要素のクリック時に処理を行っています。

そのため、ボタンをクリックすると、要素の背景色がオレンジ色に変化します。

one()

one()とは、要素に一度だけ実行できるイベント処理を設定することができるメソッドになります。

そのため、one()にclickイベントを設定することで、要素のクリック時に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

one()で要素のクリック時に処理を行った結果

one()によって要素のクリック時に処理を行っています。

そのため、ボタンをクリックすると、要素の背景色が赤色に変化します。

JavaScriptで要素のクリック時に処理を行う場合

JavaScriptで要素のクリック時に処理を行う場合は、addEventListener()を使用します。

addEventListener()とは、要素にイベント処理を設定することができるメソッドとなります。

そのため、addEventListener()にclickイベントを設定することで、要素のクリック時に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

JavaScriptのaddEventListener()で要素のクリック時に処理を行った結果

addEventListener()によって要素のクリック時に処理を行っています。

そのため、ボタンをクリックすると、要素が右に300pxだけ移動するアニメーションが発生しています。

もし、addEventListener()について詳しく知りたい場合は下記の記事をご参考ください。

まとめ

⚫︎ click()とはクリックイベントによって処理を実行することができるメソッドである。

⚫︎ click()を使用するには下記の引数を指定することができる。
・イベントデータ(任意)
・イベントハンドラ(必須)

⚫︎ イベントハンドラを設定する場合にclick()を使用すると、クリック時に処理が行われる。

⚫︎ イベントハンドラを設定しない場合にclick()を使用すると、クリック時に処理が行われない。

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

⚫︎ click()はケースにもよるが、引数なしでも使用することができる。

⚫︎ jQueryで要素のクリック時に処理を行うことができるメソッドはclick()以外にも下記のメソッドがある。
・on()
・bind()
・one()

⚫︎ JavaScriptで要素のクリック時に処理を行うにはaddEventListener()でclickを指定する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA