イベントのバブリングとキャプチャの一般的で実用的な使用例

Question

jQuery/javascriptでイベントバブリングやイベントキャプチャの実践的な例を毎日提供できますか？私はこれらのコンセプトを示すすべての種類の例を見ていますが、通常のWebアプリケーションでは決して実際には必要としないようなものです。

説明とコードスニペットの両方を高く評価します。

Answer 1

実際のイベントバブル？

jQueryの有無にかかわらず（ライブラリを使用せずにバブリングされたイベントを処理できることに注意してください）、バブリングを利用するようにコードを構造化する場合があります。

例：要素が動的に作成されているが、その要素のクリックを処理するページがあるとします。イベントハンドラが存在する前にそれらに直接バインドすることはできませんが、それらを作成するときに個々のハンドラをバインドするのは苦痛です。代わりに、イベントハンドラをコンテナオブジェクトにバインドします。クリックイベントは個々の要素からコンテナまでバブルアップされますが、どの要素がクリックされたかを引き続き知ることができます - 適切な構文.on()または.delegate()実際に古いバージョンのjQueryをお持ちの場合は.live()）、クリ​​ックされた要素にthisが設定されています。

<div id="someContainer"></div> 

$("#someContainer").on("click", ".dynamicElement", function() { 
    // this is the element, do something with it 
}); 

これは「someContainer」の子であるクラス「dynamicElement」を持つ要素のクリック時に何かをDIVと言います。これは、ページロード時に "dynamicElement"要素が存在するか、後で他のユーザーアクションに応答して追加されるか、あるいはAjaxでロードされたかに関係なく機能します。

Answer 2

divに画像を動的に追加するには、イベントのバブリングを使用して、含まれているdivのonloadイベントをキャプチャすることを計画します。