jQuery.click() против onClick: что выбрать?

Судя по вашему вопросу, он не совсем о том, стоит ли использовать jQuery или нет. Он скорее о том: лучше ли привязывать события напрямую в HTML или через обработчики событий?

Прямое связывание событий считается устаревшим. Кроме того, таким способом вы можете привязать только одну функцию к определенному событию.

Поэтому я рекомендую использовать обработчики событий. Таким образом, вы сможете привязать несколько функций к одному событию и позже отвязать их при необходимости. Вот пример кода на чистом JavaScript:

document.querySelector('#myDiv').addEventListener('click', function () {
    // Какой-то код...
});

Этот вариант работает в большинстве современных браузеров.

Однако, если jQuery уже подключен к вашему проекту, просто используйте jQuery: методы .on или .click.

Выберите этот вариант, так как он обеспечит вас как стандартом, так и производительностью.

$('#myDiv').click(function() {
    // Некоторый код
});

Второй метод использует простой JavaScript, который быстрее, чем jQuery. Но в данном случае производительность будет примерно одинаковой.

Вы можете объединить их, используя jQuery для привязки функции к событию клика. Вот пример:

<div id="myDiv">Неконтент</div>

<script>
  $('#myDiv').click(divFunction);

  function divFunction() {
    // ваш код
  }
</script>

Таким образом, при клике на элемент с идентификатором myDiv будет вызвана функция divFunction, где вы можете разместить нужный вам код.

На мой взгляд, использование onclick предпочтительнее, чем .click, только при следующих условиях:

• На странице много элементов
• Нужно зарегистрировать только одно событие для клика
• Вы беспокоитесь о производительности на мобильных устройствах или времени работы батареи

Я пришел к такому выводу, исходя из того факта, что JavaScript-движки на мобильных устройствах в 4-7 раз медленнее своих десктопных аналогов, созданных в том же поколении. Мне не нравится, когда я посещаю сайт на мобильном устройстве и сталкиваюсь с дрожащей прокруткой, потому что jQuery привязывает все события в ущерб пользовательскому опыту и времени работы батареи. Еще одним недавним поддерживающим фактором (хотя это должно волновать только государственные органы 😉 ) стало то, что у нас появлялось сообщение в IE7 о том, что выполнение JavaScript занимает слишком много времени... дождитесь окончания или отмените процесс. Это происходило каждый раз, когда нужно было привязать много элементов через jQuery.

Разделение ответственности здесь является ключевым моментом, и поэтому связывание событий является общепринятым методом. По сути, это то, о чем говорили многие существующие ответы.

Тем не менее, не стоит слишком быстро отказываться от идеи декларативной разметки. У неё есть своё место, и в таких фреймворках, как AngularJS, она занимает центральное место.

Важно понимать, что конструкция <div id="myDiv" onClick="divFunction()">Неконтент</div> была сильно осуждена, потому что некоторые разработчики злоупотребляли ей. В результате это стало столь же неприемлемым, как использование таблиц. Некоторые разработчики действительно избегают использования таблиц для табличных данных. Это идеальный пример поведения людей, которые действуют без понимания.

Хотя мне нравится идея отделять логику поведения от представления, я не вижу проблемы в том, что разметка декларирует что она делает (а не как она это делает, это уже поведение). Это может быть в форме реального атрибута onClick или пользовательского атрибута, как в компонентах JavaScript Bootstrap.

Таким образом, просматривая разметку, вы сразу можете увидеть, что происходит, вместо того чтобы пытаться исследовать связывание событий в JavaScript.

В качестве третьей альтернативы вышеописанному можно использовать атрибуты данных для декларативного объявления поведения в разметке. Поведение остается вне представления, но при беглом взгляде можно понять, что происходит.

Пример с Bootstrap:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Заголовок поповера" data-content="Вот и потрясающий контент. Он очень увлекательный. Правда?">Нажмите, чтобы переключить поповер</button>

Источник: http://getbootstrap.com/javascript/#popovers

Примечание Главный недостаток второго примера заключается в загрязнении глобального пространства имен. Это можно обойти, либо используя третью альтернативу выше, либо применяя фреймворки, такие как Angular, с их атрибутами ng-click, которые автоматически используют область видимости.