it-swarm.com.ru

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
}

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

531
Techie

Использование $('#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

531
Selvakumar Arumugam

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

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

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

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

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

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

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

37
Michał Miszczyszyn

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

14
geekman

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

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

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

14
Rahul

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

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

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

function divFunction(){
 //some code
}
13
CaffGeek

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

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

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

10
Thomas Vanderhoof

Разница в работах. Если вы используете 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')" )

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

9
Anton Baksheiev

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

Однако не выбрасывайте идею декларативной разметки слишком быстро. У него есть свое место, и с такими рамками, как 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 с автоматической областью действия.

8
Chris

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

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

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

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

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

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

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

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

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

4
Mark Pieszak - Trilon.io

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

3
Adil

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

3
supernova

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

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

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

2
Bergi

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

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

2
Dustin Laine

Функция Onclick Jquery

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

0
Love Kumar