jQuery.click () vs 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 та Native Element Performance .

Я зробив тест на 32-розрядний Firefox 16.0 на Windows Server 2008 R2 / 7 64-бітний

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

Для подій клацання перевірте події Native Browser vs тригер jquery або jQuery vs Прив’язка подій Native Click .

Тестування в Chrome 22.0.1229.79 32-розрядної версії на 64-розрядному Windows Server 2008 R2 / 7

$('#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. Але тут продуктивність буде приблизно однаковою.

IMHO, 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 });