Связывание событий - jQuery vs Javascript

В чем разница между использованием

$("#element").click(function() { alert("test"); });

и

<div id="element" onclick="alert('test');"></div>

Есть ли разница в производительности, функциональности или чем-то еще? Должен ли я использовать способ jQuery, когда я могу просто использовать атрибут onclick?

Ответы

Ответ 2

jQuery click (как и большинство абстракций событий других библиотек) использует стандартный DOM L2 addEventListener или собственный файл MSHTML ( а затем скопированы некоторыми другими браузерами, такими как Opera) attachEvent, когда addEventListener недоступен.

Если ни addEventListener, не attachEvent (как в случае с некоторыми из древних браузеров), jQuery ничего не делает (начиная с 1.4a2).

onclick="..." из вашего второго примера - это то, что называется атрибут встроенного события и определен в HTML 4.01. Значение такого атрибута события становится телом функции обработчика события. Когда событие происходит, эта функция обработчика вызывается с помощью event в качестве первого аргумента; целая область функций также обычно дополняется, чтобы включить некоторые из предков и элемента элемента.

Преимущества атрибута встроенного события более широкая поддержка браузера и, возможно, улучшенная производительность. Я помню, что я видел тесты атрибутов событий, что приводило к значительно меньшему потреблению памяти по сравнению с теми, которые были инициализированы с помощью addEventListener/attachEvent. Я не могу найти эти тесты на данный момент.

Избегая attachEvent, вы также избегаете утечек памяти в IE, естественно. Большинство популярных библиотек Javascript фактически создают круговые ссылки в своих абстракциях событий, а затем вынуждены выполнять очистку на разгрузке страницы в IE. Очевидно, что эти проблемы исчезают, когда вы избегаете абстракций событий, которые полагаются на attachEvent.

Недопустимые атрибуты событий: отсутствие повторного использования, нарушение разделения проблем и разметка (влияние на оба размера документ и его ремонтопригодность). Помните, что логика из атрибута события постоянно передается клиенту, а не является частью внешнего script, который загружается один раз и кэшируется. Кроме того, есть возможность сработать с расширенными возможностями.

Я бы рекомендовал избежать атрибутов событий, если это абсолютно необходимо.