ホームページ  >  記事  >  jqueryイベントを追加するにはいくつかの方法があります

jqueryイベントを追加するにはいくつかの方法があります

尊渡假赌尊渡假赌尊渡假赌
尊渡假赌尊渡假赌尊渡假赌オリジナル
2023-06-21 14:53:572549ブラウズ

jquery イベントを追加する方法は次のとおりです: 1. JavaScript をタグ上で直接使用すると、他のライブラリやファイルを導入せずにコードが簡潔で理解しやすくなります; 2. 「onclick」「onmouseover」などのメソッドを使用します別の JavaScript ファイルに再編成すると、管理と共有が容易になります; 3. 「.bind()」バインディング イベントは複数のイベント ハンドラーを 1 つの要素にバインドできます; 4. 「.on()」バインディング イベントはサポートされます委任 イベント ハンドラーを使用すると、コードの複雑さを軽減できます。

jqueryイベントを追加するにはいくつかの方法があります

このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery3.6.0 バージョン、Dell G3 コンピューター。

jQuery には、イベント ハンドラーを追加するさまざまな方法が用意されており、そのうちの 4 つを紹介します:

1. ラベル上で JavaScript を直接使用します

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```

利点:

  • #コードは簡潔で理解しやすいです

  • #他のライブラリやファイルを導入する必要はありません
  • 欠点:

    メンテナンスや再利用には不向き
  • 高結合、JavaScript コードと HTML コードが混在している
2. 要素メソッド `onclick` / `onmouseover` などを使用します。

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```
利点:

    そして直接タグで JavaScript を使用する場合と比較して、コードを別の JavaScript ファイルに再編成できるため、管理と共有が容易になります
  • #連鎖呼び出しをサポート
  • 欠点:


セットアップするイベントとハンドラーが多数ある場合、このメソッドは冗長になり、保守が困難になる可能性があります

  • オブジェクトのメソッドはオブジェクト自体のライフサイクルに依存します
  • 3. `.bind()` を使用してイベントをバインドします

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   var foo = function() {
     alert(&#39;Hello world!&#39;);
   };
   $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
   ```
利点:

複数のイベント ハンドラーを 1 つの要素にバインドできる

  • `$.bind()` および`$.unbind()` メソッドを使用して、イベントの登録/登録解除プロセスを監視できます。
  • 欠点:

jQuery バージョン 3.0 では非推奨になりました。 `.bind()` の代わりに、`.on()`
  • 4 を使用することをお勧めします。イベントをバインドするには `.on()` を使用します

以下は、jQuery の `.on()` メソッドを使用したイベント バインディングのサンプル コードです。

```javascript
$(document).on(&#39;click&#39;, &#39;#myButton&#39;, function() {
  // 事件处理程序
});
```

`.on()` メソッドは 3 つのパラメーターを受け入れることができます。最初のパラメータは監視/バインドされるイベント タイプ、2 番目のパラメータは応答要素のセットを制限するために使用されるオプションのセレクタ文字列または DOM ノード、3 番目のパラメータはコールバック関数、つまりイベントの発生時です。実行するアクション。

利点:


#`.on()` メソッドを使用すると、ドキュメント/要素に複数のイベント ハンドラーを非常に柔軟に追加できます。

  • 追加されたイベント ハンドラーは、`off()` メソッドを通じて削除できます。
  • `.on()` メソッドは委任されたイベント ハンドラーもサポートしているため、多数の要素を操作したり要素を動的に追加したりするときに、コードの複雑さが大幅に軽減されます。
  • 欠点:


添付されたイベントと要素の数によっては、多くのイベント ハンドラーを直接バインドするとパフォーマンスの問題が発生する可能性があります。

  • jQuery バージョン 1.7 より前の古いコードでは `.on()` を使用できません。`.bind()` などの他のメソッドを使用する必要があります (このメソッドも将来廃止される予定です) と `.delegate()` に注意する必要があります。

以上がjqueryイベントを追加するにはいくつかの方法がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。