Связывание событий - jQuery vs Javascript
В чем разница между использованием
$("#element").click(function() { alert("test"); });
и
<div id="element" onclick="alert('test');"></div>
Есть ли разница в производительности, функциональности или чем-то еще? Должен ли я использовать способ jQuery, когда я могу просто использовать атрибут onclick
?
Ответы
Ответ 1
Почему встроенный код JavaScript - это плохая вещь
и
Ненавязчивый JavaScript
Также всегда лучше использовать фреймворк для привязки событий javascript, так как есть кросс-браузерные вещи, которые вам нужно позаботиться о себе, если вы этого не сделаете (attachEvent..).
Ответ 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, который загружается один раз и кэшируется. Кроме того, есть возможность сработать с расширенными возможностями.
Я бы рекомендовал избежать атрибутов событий, если это абсолютно необходимо.