javascript - Javascriptでのイベント伝播

Question

別の要素にネストされた要素（html）があり、両方にクリックハンドラーがアタッチされている場合、内側の要素をクリックするとクリックハンドラーが実行され、次に親にバブルアップしてクリックハンドラーが実行されます。それが私がそれを理解する方法です。

同じイベントがアタッチされていない場合、イベントはDOMツリーをバブルアップしますか？その場合、すべてのハンドラーの最後にevent.stopPropagation（）を配置して、これを停止し、処理を高速化する価値がありますか？

Answer 1

event.cancelBubble = trueが設定されているか、event.stopPropagation（）が使用されていない限り、ほとんどの場合、イベントはバブルアップします。ただし、イベントハンドラーの1つがトリップした場合にのみ、このことに気づきます。

バブルになるイベントのリストについては、http：//en.wikipedia.org/wiki/DOM_eventsを参照してください。（注：HTMLイベントの表では、cancelableはevent.preventDefault（）の有効性を指し、falseを返すと、バブリングではなくデフォルトのアクションをキャンセルします）

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow 、特に1.2.1基本フローも参照して、イベント伝播のキャプチャフェーズとバブリングフェーズを理解してください。

編集

http://mark-story.com/posts/view/speed-up-javascript-event-handling-with-event-delegation-and-bubblingは、伝播を停止することでパフォーマンスが向上することを示唆していますが、データは提供していません。

http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/a9af0aa4216a8046は、ブラウザをバブリング動作用に最適化する必要があることを示唆しており、パフォーマンスに大きな違いはないはずだと述べています。ここでもデータはありません。

http://developer.yahoo.com/performance/rules.html#eventsは、イベント処理のパフォーマンスを向上させるための優れた手法を提供しますが、stopPropagationのパフォーマンスについては直接説明していません。

最終的には、サイトのメリットをよく理解するために、違いをプロファイリングする必要があります。

Answer 2

この動作はブラウザによってすでに十分に最適化されていると思います。そのため、伝播を停止するときにパフォーマンスを大幅に向上させることはできません（おそらく、本当に複雑なネストされたDOM構造の場合を除く）。パフォーマンスが心配で、多くのイベントを処理する場合は、代わりにイベントの委任に関心があるかもしれません。

また、コードは読みやすく、自明である必要があることを覚えておく必要があります。stopPropagation()は特定の目的で使用されるメソッドであるため、すべてのメソッドで使用すると、非常に混乱する可能性があります。