Привязка события - jQuery по сравнению с JavaScript
Каковы различия между использованием
$("#element").click(function() { alert("test"); });
и
<div id="element" onclick="alert('test');"></div>
Есть ли какая-либо разница в производительности, функциональность или что-либо еще? Если я использую jQuery путь, когда я могу просто использовать onclick атрибут?
2 ответа
Почему код JavaScript в интернете такой плохой
и
Также всегда лучше использовать фреймворк для привязки событий javascript, так как есть кросс-браузерные вещи, о которых вам нужно позаботиться, если вы этого не делаете (attachEvent...)
.jQuery's click (а также абстракции событий большинства других библиотек) использует стандарт DOM L2 addEventListener или MSHTML проприетарный (и позже скопированный другими браузерами, например Opera) attachEvent, когда addEventListener недоступен.
Если ни addEventListener, ни attachEvent нет (как в некоторых старых браузерах), jQuery ничего не делает (по состоянию на 1.4a2).
on click="..." из вашего второго примера - это то, что называется атрибутом внутреннего события, и определено в HTML 4.01. Значение такого атрибута события становится телом функции обработчика события. При возникновении события эта функция-обработчик вызывается с первым аргументом событием ; цепочка диапазона действия функции также обычно дополняется , чтобы включить некоторые предки элемента и сам элемент.
Преимуществами атрибута intrinsic event являются более широкая поддержка браузера и, возможно, лучшая производительность . Помню, я видел тесты атрибутов события, в результате которых потребление памяти было значительно меньше по сравнению с атрибутами события, инициализированными с помощью addEventListener/attachEvent. На данный момент я не могу найти эти тесты.
Избегая attachEvent, вы, естественно, также избегаете утечек памяти в IE. Большинство популярных Javascript библиотек на самом деле создают циклические ссылки в своих абстракциях событий, а затем вынуждены выполнять очистку при выгрузке страницы в IE. Очевидно, что эти проблемы исчезают, когда вы избегаете событийных абстракций, которые полагаются на attachEvent.
Недостатком атрибутов событий, однако, является отсутствие возможности повторного использования , нарушение разделения проблем и загрязнение разметки (влияющее как на размер документа, так и на его удобство в обслуживании). Помните, что логика из атрибута события постоянно передается клиенту, а не является частью внешнего скрипта, который загружается один раз и кэшируется. Также существует вероятность того, что логика будет отключена в расширенной области видимости.
Я бы рекомендовал избегать атрибутов события, если только в этом нет абсолютной необходимости.
.