javascriptのイベントのバブリングを逆にする

Question

ご存じのように、イベントは通常javascriptでバブルアップするので、イベントを発生させる要素のイベントハンドラが最初に実行され、次に親要素のイベントハンドラが呼び出されます。この動作は、私が現在取り組んでいるプロジェクトでいくつかの問題を引き起こし、むしろ実行順序を逆にすることになります。

私はタイムアウトを使用しているソリューションをfiguered：

$(element).mouseover(function(){ 
    var that = this; 
    setTimeout(function() { 
     //actual event handler, but references to "this" are replaced with "that" 
    },$(this).parents().length) 
}); 

だから、基本的には、イベントハンドラが短いタイムアウトの後に実行され、待機時間がDOMツリー内の要素の深さに依存： html要素のイベントハンドラはすぐに実行され、body要素のイベントハンドラは1ms待ってから実行されます。したがって、イベントの実行順序は逆になります。

私の最初のテストの結果は肯定的ですが、この解決策に問題や欠点があるかどうかはまだ分かりません。この解決策についてどう思いますか？この問題を解決するための他のアイデアも高く評価されています。

Answer 1

リバースイベントバブリングをキャプチャフェーズと呼びます。

は、それが、キャプチャ段階、それは従来のプラットフォームでは動作しませんもちろん

el.addEventListener("click", function() { 
    console.log("i run in capture"); 
}, true); 

でトリガ持ってEvent.addEventListenerの第三引数としてDOM event architecture

パスtrueを参照してください。イベントシステムをエミュレートするには、DOM3イベントシムが必要です。貢献すること自由にDOM-shim

Answer 2

あなたの解決策の大きな欠点は、処理されたイベントごとにDOMを上向きにトラバースして、親の数を確定することです。これはthisから始まります。

すべてのイベントハンドラでこのような方法でトラバースする=パフォーマンスが低い。

Answer 3

あなたはそれをエミュレートしようとすることができますが、おそらくそれは多くの問題を引き起こす可能性があります。

非常に簡単な例です（jsfiddle）。 考え方は、各イベントのコールバックを集約し、documentイベントハンドラで逆順に呼び出します（次のクリック時に新しいキューを確保するためにリストもクリアします）。

<div id="a"> 
    <div id="b"> 
     <a href="/test">Click Me!</a> 
    </div> 
</div> 

var cb = []; 

$(document).click(function(evt){ 

    cb.unshift(function(){ 
     console.log('document'); 
    }); 
    var i; 
    for(i=0; i<cb.length; ++i){ 
     cb[i].call(null, evt); 
    } 
    cb = []; 
}); 

$("#a").click(function(){ 
    cb.unshift(function(){ 
     console.log('div#a'); 
    }); 
}); 

$("#b").click(function(){ 
    cb.unshift(function(){ 
     console.log('div#b'); 
    }); 
}); 

$('a').click(function(evt){ 
    cb.unshift(function(evt){ 
     evt.preventDefault(); 
     console.log('a'); 
    }); 
}); 

たぶん、あなたは、あなたのデザインを変更する必要がありますか？より多くの情報を投稿できますか、なぜイベントキャプチャが必要ですか？