6

誰かがjQuery/javascriptでのイベントバブリングとイベントキャプチャの実用的で日常的な例を提供できますか? これらの概念を示すあらゆる種類の例を目にしますが、通常の Web アプリでは実際には必要のないもののように常に見えます。

説明とコード スニペットの両方をいただければ幸いです。

4

2 に答える 2

8

実際のイベントバブリング？

jQuery の有無にかかわらず (ライブラリを使用せずにバブルされたイベントを処理できることに注意してください)、バブルを利用するようにコードを構成したいシナリオがいくつかあります。

1 つの例: 要素が動的に作成されているページがあり、それらの要素のクリックを処理したいとします。それらが存在する前に、イベント ハンドラーをそれらに直接バインドすることはできませんが、作成時に個々のハンドラーをそれらにバインドするのは少し面倒です。代わりに、イベント ハンドラーをコンテナー オブジェクトにバインドします。クリック イベントは個々の要素からコンテナーにバブル アップしますが、どの要素がクリックされたかはまだわかります - .on(), or .delegate()(またはクリックされた要素.live()に設定されるためです。this

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

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

これは、「someContainer」div の子であるクラス「dynamicElement」を持つ要素をクリックすると、何かを行うことを意味します。"dynamicElement" 要素がページの読み込み時に存在していたか、後で他のユーザー アクションに応答して追加されたか、おそらく Ajax で読み込まれたかどうかに関係なく機能します。

于 2012-03-03T12:38:52.377 に答える
1

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

于 2013-02-20T18:21:16.400 に答える