将事件附加到DOM上的所有内容的最明智的方法是什么？

Question

所以标题有点耸人听闻,所以让我描述一下我想要完成的事情.我基本上想要从Firebug中制作'inspect element'悬停效果,因此用户最终可以从DOM中选择内容.

我从一个天真的实现开始

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

这有几个问题(其中一些我可以修复),但是直接和最明显的是冒泡,以便每个父母<div>都有一个边界,而且它只附加到<div>s

我是否需要枚举我想要附加此事件的每个元素集？我是否需要以某种方式阻止冒泡,以便只有最上层的元素才能获得事件处理程序(这看起来像什么？)

欢迎任何和所有建议!

Answer 1

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

这将附加一个事件处理程序document,事件将冒泡到它们将被处理的位置.

在jsFiddle上看到它.