на jQuery.нажмите () vs onClick

для повышения производительности используйте собственный JavaScript. Для более быстрой разработки используйте jQuery. Проверьте сравнение в производительности на jQuery против собственной производительности элемента.

Я сделал тест в Firefox 16.0 32-бит на Windows Server 2008 R2 / 7 64-бит

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

для событий щелчка проверьте родные события браузера против триггера jquery или jQuery против родного события щелчка Связывание.

тестирование в Chrome 22.0.1229.79 32-разрядный на Windows Server 2008 R2 / 7 64-разрядный

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

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

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

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

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

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

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

$('#myDiv').click лучше, потому что он отделяет код JavaScript от HTML-код. Нужно постараться сохранить страницу поведение и структура разные. Это очень помогает.

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

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

Go для этого, поскольку это даст вам как стандарт, так и производительность.

 $('#myDiv').click(function(){
      //Some code
 });

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

IMHO, onclick является предпочтительным методом .нажмите только при выполнении следующих условий:

• на странице много элементов
• только одно событие для регистрации события click
• вы беспокоитесь о мобильной производительности / времени автономной работы

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

разница в работах. Если вы используете click (), вы можете добавить несколько функций, но если вы используете атрибут, будет выполнена только одна функция - последняя.

демо

HTML-код

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

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

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

не отбрасывайте идею декларативной разметки слишком быстро. Он имеет свое место, и с рамками, такими как Angularjs, является центральным элементом.

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

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

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

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

ушко пример:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

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

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

ни один лучше в том, что они могут быть использованы для различных целей. onClick (фактически onclick) работает немного лучше, но я очень сомневаюсь, что вы заметите разницу.

стоит отметить, что они делают разные вещи: .click может быть привязан к любой коллекции jQuery, тогда как onclick должен использоваться inline на элементах, к которым вы хотите привязать его. Вы также можете привязать только одно событие, с использованием onclick, тогда как .click позволяет продолжайте связывать события.

на мой взгляд, я был бы последователен в этом и просто использую .click везде и сохранить все моего кода JavaScript вместе и отдельно от HTML.

не используйте onclick. Нет никакой причины использовать его, если вы не знаете, что делаете, и, вероятно, не знаете.--11-->

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

onclick, onmouseover, onmouseout и т. д. события плохо для производительности (in Internet Explorer в основном, пойди разберись). Если вы используете код Visual Studio, когда вы запускаете страницу с ними, каждый из них создаст отдельный блок сценария, занимающий память и, таким образом, замедляющий производительность.

не говоря уже о том, что у вас должен быть разделение: JavaScript и макеты должны быть разделены!

всегда лучше создавать evenHandlers для любого из этих событий, одно событие может захватывать сотни / тысячи элементов, а не создавать тысячи отдельных блоков скриптов для каждого из них!

(кроме того, все, что говорят все остальные.)

большую часть времени собственные методы JavaScript являются лучшим выбором по сравнению с jQuery, когда производительность является единственным критерием, но jQuery использует JavaScript и упрощает разработку. Вы можете использовать jQuery, поскольку он не слишком ухудшает производительность. В вашем конкретном случае разница в производительности игнорируется.

первый метод использования onclick Это не jQuery, а просто Javascript, поэтому вы не получаете накладные расходы jQuery. Способ jQuery может быть расширен через селекторы, если вам нужно добавить его в другие элементы без добавления обработчика событий к каждому элементу, но, как у вас есть сейчас, это просто вопрос, нужно ли использовать jQuery или нет.

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

первый способ предпочитают. Он использует расширенная модель регистрации событий [s], что означает, что вы можете присоединить несколько обработчиков к одному элементу. Вы можете легко получить доступ к объекту события, и обработчик может жить в области любой функции. Кроме того, она динамична, Я. e он может быть вызван в любое время и особенно хорошо подходит для динамически генерируемых элементов. Используете ли вы jQuery, другую библиотеку или собственные методы напрямую, на самом деле нет вопрос.

второй метод, используя встроенные атрибуты, требует много глобальных функций (что приводит к загрязнению пространства имен) и смешивает контент/структуру (HTML) с поведением (JavaScript). Не используйте это.

на ваш вопрос о производительности или стандартах нелегко ответить. Эти два метода просто совершенно разные и делают разные вещи. Первый сильнее, а второй презираем (считается дурным тоном).

выполнить JavaScript при нажатии кнопки:

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>