Стоп пузыря событий - увеличивает производительность?

86
9

Если я не возвращаю false из обратного вызова события или используя e.stopPropagation функцию jQuery, событие выдает пузырьки DOM.


В большинстве сценариев мне все равно, если событие пузырится или нет. Как с этим примером структуры DOM:


​<div id="theDiv">
<form id="theForm" >
<input type="submit" value="submit"/>
</form>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Как правило, у меня нет множественного вложенного обратного вызова submit:


$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(e) {
alert('FORM!');
e.preventDefault();
});​

Fiddle

Эта DEMO показывает пузырьки событий submit на <div>!

Для меня это не имеет значения, если я остановлю распространение или просто предотвращу дефолт.


В этих сценариях Если я остановлю распространение, я получу преимущества производительности?

спросил(а) 2012-03-16T05:00:00+04:00 8 лет, 3 месяца назад
1
Решение
88

Преимущества эффективности? Да, есть некоторые незначительные преимущества, описанные в этом тесте производительности между jQuery live() и on(). Как отметил также @Joseph, разница между ними заключается в том, что live распространяется вплоть до дерева, а on() переходит только к ближайшему общему родителю.

В этих тестах показано, что on() может превосходить live() до 4 раз. На практике это, вероятно, все еще не стоит раскалывать волосы, но если у вас очень глубокие html-структуры и множество триггеров событий, разница в производительности при остановке распространения может быть полезной, я полагаю.

ответил(а) 2012-03-16T05:58:00+04:00 8 лет, 3 месяца назад
68

здесь сравнение между on() и live(), которое связано с барботажем и причиной замены jQuery live(). проблема с live() заключалась в том, что события были прикреплены к документу, что вызвало длительное путешествие по дереву, чтобы найти обработчик. что вы можете сделать с помощью on(), вы можете прикрепить обработчик к ближайшему общему родительскому элементу, тем самым избегая длительного перемещения по дереву в поисках обработчика, что означает более высокую производительность.

но я предлагаю проверить свои собственные тесты.

ответил(а) 2012-03-16T05:30:00+04:00 8 лет, 3 месяца назад
55

Этот тест показывает, что есть преимущество в производительности для убийства события раньше. (15% -30%) И, вероятно, будет большая разница в сложной DOM. Интересно также отметить, что захват прослушивателей событий кажется немного более быстрым, чем прослушивание прослушивателей событий независимо от того, что вы делаете с событием после его обработки. Странно, но интересно; Я тестировал только в одном браузере, хотя

ответил(а) 2012-04-26T17:39:00+04:00 8 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема