例で説明されたJQueryのOnClick関数

JavaScriptの高速で小さく機能豊富なライブラリの1つは、jQueryです。 jQueryは、HTMLドキュメントの作成、イベント処理、トラバーサル、操作などに使用されます。

HTML要素がクリックされるたびに、jQueryクリックイベントが発生します。 jQueryでonclick関数をトリガーするには、click（）メソッドを使用します。 たとえば、ドキュメントの段落をクリックすると、$（ "p"）。click（）メソッドによってクリックイベントがトリガーされます。 ユーザーは、クリックのイベントが発生するたびに関数をクリックメソッドにアタッチして、関数を実行できます。 これにより、click（）のイベントがトリガーされるたびにコードが実行されます。

マウスクリックは、HTMLElement.click（）メソッドを介してシミュレートされます。

Click（）関数は、クリックイベントを開始するjQueryに組み込まれている関数です。 関連する要素がクリックされるたびに、click（）メソッドによってイベントが発生します。 次に、このイベントは、ドキュメントツリー（またはイベントチェーン）の上位にある要素のクリックイベントを発生させます。

名前が示すように、要素上でユーザーがマウスボタンを押して放すだけです。

1つ以上のイベントハンドラーは、on（）メソッドを介して選択された要素にアタッチされます。 要素をクリックすると、click（）のイベントが発生します。 click（）イベントが発生すると、click（）メソッドが実行されます。 クリック（）メソッドに関数を付加して実行します。 click（）メソッドは、jQueryの他のイベントで使用されます。

したがって、.click（）は、イベントハンドラーをJavaScriptイベント「クリック」にバインドするか、要素に対してイベントをトリガーします。 JavaScriptのonclickメソッドのバリエーションは次のとおりです。

1. .click（ハンドラー）。
2. .click（[eventData]、handler）。
3. 。クリック（）。

最初と2番目のバリエーションは、.on（ "click"、handler）の短縮形であり、最後のバリエーションの.trigger（ "click"）のショートカットです。

マウスポインタが要素の上にあり、ボタンが押されて放されると、イベントclick（）がその要素に送信されます。 イベントは、HTMLの任意の要素で受信できます。

Click（）イベントは、次のコードで他の要素がクリックされた場合にもトリガーできます。

このコードを使用すると、メッセージは要素によってアラートされます

以下のイベントを通じて、click（）イベントのみがトリガーされます。

• マウスのポインタが要素内にあり、マウスのボタンが押されている場合。
• マウスのポインタが要素内にあり、マウスのボタンが離されたとき。

アクションを実行する前に、上記のイベントは通常、望ましいシーケンスです。 それ以外の場合、他の適切なイベントは、マウスダウンまたはマウスアップイベントです。

.click（）メソッドは.on（ "click"、handler）のショートカットであるため、.off（ "click"）を使用するとデタッチする可能性があります。

使用法

click（）メソッドを呼び出すために使用できる2つの方法があります。

• 与えられた関数の引数で
• 与えられた議論なし

jQueryのonclick関数は、目的のタスクを実行するために、div、段落、ハイパーリンクなどのHTML要素で使用できます。 クリックは、マウスのボタンを押すと発生するマウスイベントです。 ただし、マウスのポインタが要素内にある場合、イベントが発生します。

構文：

$（selector）.click（） ; ->選択した要素のクリックイベントをトリガーするために使用されます。

$（selector）.click（function）; ->クリックイベントに関数をアタッチするために使用されます。

• 使用されるオプションのパラメータは、クリックイベントの発生時に実行するために使用される「関数」です。
• 戻り値：実行する関数で指定された、選択された要素が返されます。

メソッドclick（）の実装

1.関数の引数が与えられたとき

このタイプの実装では、関数が入力として受け取られ、click（）のメソッドが呼び出されるたびに実行されます。

• コードの記述は、スクリプトタグとコードのHTML本文の間にあります。
• 関数の呼び出しは、h1スタイルの属性として行われます。
• 引数は関数で宣言され、個別に関数として扱われます。
• メソッドトグルは、1000msの遅延でこの演算子を使用してオブジェクトに適用されます。
• 与えられた関数の引数を使用した実装メソッドの例を以下に示します。

コードの出力は「クリックするとテキストが切り替わります！」になります。

2.引数が与えられていない場合

javascript onclickメソッドは、 要素はすでにメソッドに割り当てられています。 したがって、要素は別の要素のonclickイベントを個別に呼び出すことができます。 これは、次の手順で実行できます。

1. オブジェクトは、クリック可能な特定のスタイルの属性を使用して最初に宣言する必要があります。 オブジェクトに対してonclickアクションを宣言する必要があります。
2. スクリプトのブロックは、コードの本体に作成されます。ここで、メソッドclick（）の帰属は、異なるスタイルの形式pに行われます。
3. すでに定義されているh1onclickメソッドは、関数呼び出し内で呼び出されます。
4. 次に、同じonclickメソッドが属性に対して呼び出されます。
5. 引数を指定せずにclick（）メソッドを実装するコードの例を以下に示します。

コードの出力は「クリックするとアラートが呼び出されます！」です。

• • $ .onメソッドでは、dblclick、changeなどの多くのイベントを使用できます。

3. HTMLボタンをレンダリングし、ボタンをクリックするとページにテキストが追加されます。 Click（）メソッドは、最も一般的にはボタンにアタッチされますが、Webページの他の要素にアタッチすることもできます。

• • 基本ボタンは、IDが「main」の<div>内にある「btn-primary」のIDでレンダリングされます。
  • コードを介して、ボタンをクリックした後、<p>タグに「新しいコンテンツ」のクラスを含む新しいコンテンツが表示されます。
  • jQueryは<script>タグで囲まれています。

• • クリック（）メソッドはボタンのIDに付加され、引数は無名関数であるコールバック関数と見なされます。
  • 文字列「ボタンがクリックされました」は、コールバック関数によって返されます。

• • 名前のない関数は単に無名関数と呼ばれ、メソッドの引数としてコールバックとして使用されます。 レスポンシブWebサイトとアプリケーションを構築するために、無名関数とコールバックメソッドが基礎として機能します。

• • コードは、<div>「main」内のボタンから始まります。
  • ボタンがクリックされると、click（）メソッドがボタンセレクターにアタッチされているため、コールバック関数がイベントハンドラーによって呼び出されます。
  • 「ボタンがクリックされました」という文字列が表示されます。
  • 上記のコードはコンテンツを1回だけレンダリングしますが、コードがクリックされるたびに文字列を表示するために、HTML（）の代わりにappend（）が使用されます。

• • <p>タグ内の新しいコンテンツとして文字列を3回生成します。
  • ボタンがクリックされるたびに、コールバック関数が呼び出されます。

結論

jqueryでのonclick関数の機能については、その使用法と例とともに記事で説明されています。 ほんの数行のコードで、 JavaScriptのonclickメソッドを使用してWebページの機能を作成できます。

Web開発についてもっと学び、他の関連分野に特化したい場合は、 upGradが提供する「コンピュータサイエンスの理学修士」コースを確認してください。 エントリーレベルの専門家（21〜45歳の男性と女性の両方）向けに特別に設計されたこのコースは、長距離通勤者が簡単に利用できるように、ライブセッションを備えたオンラインプラットフォームで行われます。 30以上のプロジェクトと課題で、学生はIIIT-バンガロアとLJMUの卒業生のステータスの恩恵を受けることになります。 ご不明な点がございましたら、お気軽にチームまでお問い合わせください。