JavaScriptイベントの代表団は、あなたが思っているよりも簡単です

キーテイクアウト

• JavaScriptイベント代表団は、必要なイベントハンドラーの数を減らすことでパフォーマンスを向上させる手法です。個々のイベントハンドラーを各要素に添付する代わりに、単一のイベントハンドラーが親要素に追加され、すべての子供要素のイベントを処理します。
• イベント委任は、イベントバブルとターゲット要素を通じて機能します。イベントがトリガーされると、イベントバブルとして知られるプロセスであるすべての要素の祖先でもアクティブになります。ターゲット要素は、イベントの発生要素であり、イベントオブジェクトのプロパティに保存され、イベントがどこから発生したかを判断できます。
• イベント委任によりパフォーマンスが向上し、メモリの使用量が減少しますが、すべてのイベントバブルではなく、マウスイベントの処理がパフォーマンスのボトルネックになる可能性があります。したがって、これらの潜在的な問題を回避するために、イベント委任コードを慎重に管理することが重要です。

Webページに少しJavaScriptの対話性を追加する場合は、JavaScriptイベントの委任を聞いたことがあり、それがそれらの複雑なデザインパターンの1つであると思ったかもしれません。真実は、JavaScriptイベントハンドラーを追加する方法を既に知っている場合、実装するスナップです。

JavaScriptイベントは、Webページ上のすべてのインタラクティブ性の岩盤です（私は、それらのディンキーCSSドロップダウンメニューではなく、深刻なインタラクティブ性を意味します）。従来のイベント処理では、必要に応じて各要素からイベントハンドラーを追加または削除します。ただし、イベントハンドラーは、メモリリークやパフォーマンスの劣化を引き起こす可能性があります。 JavaScriptイベント代表団は、複数の子要素にイベントハンドラーを追加する必要がないように、親要素に単一のイベントハンドラーを追加するシンプルなテクニックです。

どのように機能しますか？

イベント委任では、イベントバブルとターゲット要素のJavaScriptイベントの2つのしばしば見落とされがちな機能を使用しています。たとえば、マウスがボタンをクリックするなど、イベントが要素でトリガーされると、その要素のすべての祖先でも同じイベントがトリガーされます。このプロセスは、イベントバブルとして知られています。このイベントは、起源の要素からDOMツリーの上部まで泡立ちます。任意のイベントのターゲット要素は、私たちの例の発信元要素であるボタンであり、イベントオブジェクトのプロパティに保存されます。イベント委任を使用すると、イベントハンドラーを要素に追加し、イベントが子供の要素から泡立つのを待って、イベントがどの要素を起源とするかを簡単に判断できます。

それはどのように私を助けますか？

ユーザーがテーブルセルをクリックしたときに何かが起こりたい10列と100列のHTMLテーブルを想像してください。たとえば、クリック時にそのサイズのテーブルの各セルを編集可能にする必要がありました。 1000個のセルのそれぞれにイベントハンドラーを追加することは、大きなパフォーマンスの問題であり、潜在的には、ブラウザークラッシュメモリの漏れのソースになります。代わりに、イベント委任を使用して、テーブル要素に1つのイベントハンドラーのみを追加し、クリックイベントをインターセプトし、どのセルがクリックされたかを決定します。

コードではどのように見えますか？

コードは簡単です。ターゲット要素の検出について心配する必要があります。 ID「レポート」のテーブル要素があり、編集機能を呼び出すクリックイベントのイベントハンドラーをテーブルに追加しました。 EditCell関数は、テーブルまで泡立ったイベントのターゲット要素を決定する必要があります。この機能が必要ないくつかのイベントハンドラー機能を作成することを期待すると、GetEventTargetと呼ばれる別の関数に配置します。

関数getEventTarget（e）{
  e = e || window.event;
  e.targetを返します|| E.SRCELEMENT;
}

変数eはイベントオブジェクトを表し、インターネットエクスプローラーのsrcelementプロパティと他のブラウザのターゲットプロパティに保存されているターゲット要素にアクセスして返すために、クロスブラウザーコードを散布する必要があります。

次は、GetEventTarget関数を呼び出す編集機能です。ターゲット要素を参照したら、要素が私たちが期待している要素であることを確認するのは私たち次第です。

関数editcell（e）{
  var target = getEventTarget（e）;
  if（target.tagname.tolowercase（）=== 'td'）{
    //セルで何かをします
  }
}

EditCell関数では、ターゲット要素がタグ名をチェックすることによりテーブルセルであることを確認します。そのチェックは過剰に簡素化される可能性があります。テーブルセル内の別の要素がイベントのターゲットである場合はどうなりますか？親TD要素を見つけるためにコードを追加する迅速な変更が必要になる場合があります。一部のセルが編集可能であってはならない場合はどうなりますか？その場合、特定のクラス名を編集不可能なセルに追加し、ターゲット要素が編集可能にする前にそのクラス名値がないことを確認できます。多くのオプションが利用可能であり、アプリケーションに合ったものを選択するだけです。

長所と短所は何ですか？

JavaScriptイベントの委任の利点は次のとおりです。

• メモリにセットアップして居住するイベントハンドラーは少なくなります。これは大きなものです。パフォーマンスが向上し、クラッシュが少なくなります。
• DOMの更新後にハンドラーを再攻撃する必要はありません。たとえば、Ajaxを介してページコンテンツが動的に生成された場合、要素がロードまたはアンロードされているため、イベントハンドラーを追加および削除する必要はありません。

潜在的な問題はそれほど明確ではないかもしれませんが、それらを認識すると簡単に避けられます。

• イベント管理コードがパフォーマンスのボトルネックになる可能性のあるリスクがあるので、可能な限り無駄のない状態に保ちます。
• すべてのイベントがバブルではありません。ぼやけ、フォーカス、ロード、アンロードイベントは、他のイベントのように泡立ちません。 BlurおよびFocusイベントには、泡の段階ではなく、キャプチャフェーズ（IE以外のブラウザー）を使用して実際にアクセスできますが、それは別の日のストーリーです。
• いくつかのマウスイベントを管理する際には注意が必要です。コードがMousemoveイベントを処理している場合、Mousemoveイベントが頻繁にトリガーされるため、パフォーマンスのボトルネックを作成する深刻なリスクがあります。マウスアウトイベントには、イベント委任で管理が困難な風変わりな動作があります。

まとめ

JavaScriptイベント委任の例があります。 ui。また、使用可能なタイプブログのこのようなライブラリを使用しない例を見つけることもできます。

イベント委任は、ニーズが生じ、実装しやすい場合にキットにある便利なツールです。

JavaScriptイベント委任についてのよくある質問

JavaScriptでイベント委任を使用することの主な利点は何ですか？

JavaScriptのイベント委任は、イベントバブルプロセスを活用する手法です。イベント委任を使用することの主な利点は、要素に接続されたイベントリスナーの数を減らすことでパフォーマンスを大幅に改善することです。個々のイベントリスナーを各要素に添付する代わりに、単一のイベントリスナーを親要素に添付します。このリスナーは、すべての子供の要素のイベントを処理します。これは、リスト項目やテーブル行など、多数の類似の要素を扱う場合に特に有益です。

イベント委任はJavaScriptでどのように機能しますか？

イベント委任は、JavaScriptのイベントバブルプロセスを活用することで機能します。子要素でイベントが発生すると、DOMツリーを通り抜けて泡立ち、親要素のそれぞれで同じイベントをトリガーします。イベントリスナーを親要素に添付することにより、すべての子要素のイベントを処理できます。イベントハンドラーに渡されたイベントオブジェクトには、「ターゲット」プロパティが含まれています。これには、イベントをトリガーした実際の要素を指します。このプロパティを使用して、イベントの処理方法を決定できます。

JavaScriptでイベントでイベント委任を使用できますか？

はい、イベント委任は、泡のJavaScriptのあらゆるイベントで使用できます。ただし、すべてのイベントがバブルではありません。たとえば、「フォーカス」イベントと「ブラー」イベントは、すべてのブラウザでバブルではありません。これらのイベントでは、代わりに「Focusin」イベントと「フォーカス」イベントを使用できます。

JavaScriptでイベントバブルを停止するにはどうすればよいですか？

イベントオブジェクトの「StopPropagation」メソッドを使用して、JavaScriptでイベントバブルを停止できます。この方法は、イベントがDOMツリーを泡立てるのを防ぎます。ただし、この方法を使用する場合は、他のイベントハンドラーがトリガーされるのを防ぐことができるため、注意してください。

JavaScriptにおけるイベント委任とイベントバインディングの違いは何ですか？

JavaScriptでのイベントバインディングには、イベントリスナーを要素に直接接続することが含まれます。このリスナーは、この特定の要素のイベントのみを処理します。一方、イベントの代表団は、イベントリスナーを親要素に添付することを伴います。これは、すべての子要素のイベントを処理します。この手法は、特に多数の類似の要素を扱う場合、より効率的です。

動的に追加された要素でイベント委任を使用できますか？

はい、イベント委任の主な利点の1つは、動的に追加された要素で動作することです。イベントリスナーは親要素に添付されるため、リスナーが添付された後にDOMに追加される子要素のイベントを処理できます。

JavaScriptの「この」キーワードでイベント委任を使用するにはどうすればよいですか？

イベント委任を使用する場合、イベントハンドラー内の「この」キーワードは、イベントをトリガーした要素ではなく、イベントリスナーが添付されている要素を指します。イベントをトリガーした要素を参照するには、イベントオブジェクトの「ターゲット」プロパティを使用できます。

jqueryでイベント委任を使用できますか？

はい、jQueryは '.on（）'メソッドを提供します。これは、イベント委任を実装するために使用できます。 '.on（）'メソッドは、イベントタイプ、子要素のセレクター、およびイベントハンドラーの3つの引数を取ります。

イベント委任を使用することのパフォーマンスへの影響は何ですか？

イベント委任は、特に多数の同様の要素を扱う場合、パフォーマンスを大幅に改善できます。単一のイベントリスナーを親要素に添付することにより、ブラウザで管理する必要があるイベントリスナーの数を減らし、パフォーマンスの顕著な改善につながる可能性があります。

JavaScriptのカスタムイベントを使用したイベント委任を使用できますか？

はい、JavaScriptでカスタムイベントを使用したイベント委任を使用できます。組み込みのイベントと同じように、カスタムイベントはDOMツリーを泡立てることができ、親要素に添付された単一のイベントリスナーでそれらを処理できます。

以上がJavaScriptイベントの代表団は、あなたが思っているよりも簡単ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。