DOM上のすべてのイベントにイベントをアタッチするにはどうすればよいでしょうか？

Question

タイトルはちょっとセンセーショナルなので、私が達成したいことを説明しましょう。私は基本的にFirebugから 'inspect要素'ホバー効果を作りたいので、ユーザーは最終的にDOMからコンテンツを選択することができます。

私はこれはいくつかの問題（そのうちのいくつかは、私が修正することができます）だけでなく、即時およびすべての親<div>は国境を取得するようにバブリングされ、最も明白な、そしてそれを持っている

$('div').bind('mouseover', function() { 
    $(this).css('border', '1px solid black'); 
}).bind('mouseleave', function() { 
    $(this).css('border', 'none'); 
}); 

の素朴な実装で開始しました添付されているのは<div>です。

このイベントを添付する必要がある各要素セットを列挙する必要がありますか？何らかの理由でバブルが発生しないようにする必要がありますか？最も上の要素だけがイベントハンドラを取得するようにしてください（そしてその外観はどうなりますか？）

Answer 1

$(document).bind('mouseover', function(event) {  
    $(event.target).addClass('hover'); 
}); 

これはdocumentに一つのイベントハンドラを添付し、それらが処理されることにイベント意志バブルアップします。

See it on jsFiddle。