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


559

У меня огромное приложение 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
}

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


9
Вы можете узнать о различных способах добавления обработчиков событий и их преимуществах и недостатках здесь: quirksmode.org/js/introevents.html . jQuery - это просто приятная оболочка для расширенной регистрации событий.
Феликс Клинг

12
Не забудьте поместить функцию click внутри $ (document) .ready (function ().
joan16v

Ответы:


559

Используя $('#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


13
Допустим, вы $('#myDiv').click(function(){сначала запускаете код, затем динамически генерируете 20 строк HTML-кода из JavaScript, и у каждой строки есть кнопка, для которой при нажатии требуется JavaScript для выполнения той же функции. Если вы сделаете это сначала, то он не будет работать, так как обработчик событий был добавлен до того, как был сгенерирован HTML. Казалось бы, проще просто добавить onclick="functionName()"динамически генерируемый HTML, тогда кнопка работает сразу. Или вы знаете более элегантное решение для этой ситуации?
zuallauz

17
@zuallauz для этого случая jQuery предлагает .delegate()функцию. Он прикрепит событие к любому элементу, который появится в будущем на сайте.
Зефирин

17
@SimonRobb .liveустарела. Используйте .delegateдля более старых версий или .onдля более новых версий jQuery.
Сельвакумар Арумугам

4
@Vega, хорошие моменты. Как насчет читабельности? Теперь вам нужно выполнить поиск по всем ссылочным JS-файлам на странице, чтобы увидеть все обработчики щелчков элемента по идентификатору элемента, а не искать имя функции. Что вы думаете об этом?
супертонский

6
Я согласен с @supertonsky. Я категорически не согласен с тем, что $ ('# myDiv'). Click (function () {лучше. В больших приложениях javascript связывание с событием становится чрезвычайно трудным для поиска всех ссылок, привязанных к этой цели. Является ли это связыванием для класса? ?, идентификатор, ребенок ссылка на HTML теге А что произойдет , если изменения CSS и имена классов вы обязаны должны быть изменены в моем опыте работы с другим кодом становится очень некрасиво очень быстро?.
Джон

65

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

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

Будьте осторожны при использовании forEach, потому что не все браузеры совместимы, я думаю, что не для IE, например. Возможно, полифилл будет полезен.
khaled_webdev

39

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

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

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

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

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

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


Можно зарегистрировать несколько функций, используя встроенный HTML, например <div onclick = "handler1 (); handler2 (); handler3 ();"> </ div>
Kira

2
Таким образом, вы все еще регистрируете только одно «выражение». Например, если handler1выдает ошибку handler2и handler3никогда не будет вызван. Кроме того, вы не можете динамически добавлять и удалять определенные функции из слушателя. И последнее , но не в последнюю очередь, handler1, handler2и handler3должны быть объявлены в глобальном масштабе , который является запах.
Михал Мищин

Использование try..catchвнутри функций не будет работать, если handler2не определено. Встроенный JavaScript, очевидно, не работает, когда JS отключен в браузере пользователя, пожалуйста, не вводите в заблуждение других.
Михал Мищин

Я упоминал, что не уверен в отключенном JavaScript. Я не дезинформирую и не обманываю других
Кира

В этом случае вы можете попробовать следующее <div onclick = "function () {try {handler1 (); handler2 (); handler3 ();} catch {}}"> </ div>
Kira

16

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

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

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

function divFunction(){
 //some code
}

14

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


2
Этот ответ имеет смысл, так как люди, которые проектируют и пишут js, отличаются в большинстве случаев. И это звучит странно, чтобы поднять это после почти 4 лет, с тех пор как это было отправлено !!
LearningEveryday

14

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

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

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


11

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

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

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


10

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

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


Мы можем выполнять более одной функции, используя такие атрибуты, как $ ('# JQueryAttrClick'). Attr ('onClick', "alert ('2'); alert ('3'); alert ('4')")
Kira

8

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

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


4

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

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

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

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


2
Даже если «лучше» не определено явно, почти никогда не стоит добавлять обработчики событий в вашу разметку напрямую
Jay

@Jayraj, когда я сказал в своем ответе, что это хорошая идея?
Таблетки взрыва

3
Говоря, что .clickне лучше, чем onclick(«Никто не лучше »), подразумевалось, что onclickэто почти или столь же хороший способ написания кода, хотя на самом деле .clickэто лучшая практика на милю. Извините, но ИМХО вам следует перефразировать ваш ответ
Jay

2
@ExplosionPills Я бы удалил часть ответа, в которой говорится, что ни тот, ни другой лучше. Абзац в конце звучит как противоречие.
Хуан Мендес,

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

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

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

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

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



3

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


2

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

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


1
Пример jQuery - это практически то же самое, что document.querySelector('#something').addEventListener(...и в простом Javascript, или аналогичный, так что это не главное . Точно так же вы можете ловить всплывающие события от дочерних узлов в Javascript, а не только с помощью ярлыков jQuery. Суть в том, что эти события должны быть в контроллере (файл определений поведения javascript), а не в представлении (разбросанном здесь и там в html, требующем глобальных переменных-функций или, что еще хуже, встроенного кода).
NoBugs

2

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

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

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.