Какой самый разумный способ прикрепить событие ко всему на DOM?

Question

Так что название немного сенсационное, поэтому позвольте мне описать то, чего я хочу достичь. По сути, я хочу сделать эффект наведения элемента inspect из Firebug, чтобы пользователь мог в конечном итоге выбрать контент из 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 .