jQuery.click () против onClick

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

Первый способ

HTML

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

JQuery

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

Второй метод

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

Вызов функции JavaScript

function divFunction(){
    //Some code
}

Я использую первый или второй метод в моем приложении. Какой лучше? Лучше для производительности? А стандарт?

Используя $('#myDiv').click(function(){это лучше как следует стандартной регистрации событий модели. (JQuery внутренне использует addEventListenerи attachEvent).

По сути, регистрация события современным способом - ненавязчивый способ обработки событий. Также для регистрации более одного прослушивателя событий для цели вы можете вызвать addEventListener()одну и ту же цель.

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

Зачем использовать addEventListener? (От MDN)

addEventListener - это способ регистрации прослушивателя событий, как указано в W3C DOM. Его преимущества заключаются в следующем:

• Это позволяет добавить более одного обработчика для события. Это особенно полезно для библиотек DHTML или расширений Mozilla, которые должны хорошо работать, даже если используются другие библиотеки / расширения.
• Это дает вам более точный контроль фазы, когда слушатель активируется (захват или всплывание)
• Он работает с любым элементом DOM, а не только с элементами HTML.

Подробнее о регистрации современных событий -> http://www.quirksmode.org/js/events_advanced.html

Другие методы, такие как установка атрибутов HTML , например:

<button onclick="alert('Hello world!')">

Или свойства элемента DOM , например:

myEl.onclick = function(event){alert('Hello world');}; 

старые и их легко можно переписать.

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

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

Подробнее о традиционной обработке событий -> http://www.quirksmode.org/js/events_tradmod.html

Ссылка на MDN: https://developer.mozilla.org/en-US/docs/DOM/event

Для повышения производительности используйте собственный 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

Для событий щелчка, проверьте события Native Browser против триггера jquery или jQuery против привязки события Native Click .

Тестирование в 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 или нет. Скорее: лучше связывать события встроенными в HTML или через прослушиватели событий?

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

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

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

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

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

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

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

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

function divFunction(){
 //some code
}

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

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

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

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

ИМХО, onclick является предпочтительным методом по сравнению с .click только при соблюдении следующих условий:

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

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

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

DEMO

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.

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

Пример начальной загрузки:

<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должны быть встроены в элементы, с которыми вы хотите, чтобы они были связаны. Вы также можете привязать только одно событие к использованию onclick, тогда как .clickвы можете продолжать связывать события.

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

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

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

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

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

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

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

Ну, одна из основных идей jQuery - отделить JavaScript от неприятного HTML- кода. Первый способ - это путь.

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

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

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

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

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

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

Функция Onclick Jquery

$('#selector').click(function(){ //Your Functionality });