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

511

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

Первый метод

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 ().
Теги:
javascript-events

17 ответов

512
Лучший ответ

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

В основном регистрация события в современном способе - это unobtrusive способ обработки событий. Также для регистрации более одного прослушивателя событий для цели вы можете вызвать 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 element заключается в том, что только один обработчик событий может быть привязан к элементу за событие.

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

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

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

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

Для событий щелчка, проверьте Родные события браузера против триггера jquery или jQuery vs Native Click Event Binding.

Тестирование в 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 не является ответом
  • 0
    Будьте осторожны при использовании forEach, потому что не все браузеры совместимы, я думаю, что не для IE, например. Возможно, полифилл будет полезен.
36

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

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

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

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

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

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

  • 0
    Можно зарегистрировать несколько функций, используя встроенный HTML, например <div onclick = "handler1 (); handler2 (); handler3 ();"> </ div>
  • 2
    Таким образом, вы все еще регистрируете только одно «выражение». Например, если handler1 выдает ошибку, handler2 и handler3 никогда не будут вызваны. Кроме того, вы не можете динамически добавлять и удалять определенные функции из слушателя. И последнее, но не менее handler1 , handler1 , handler2 и handler3 должны быть объявлены в глобальной области видимости, которая является запахом.
Показать ещё 4 комментария
13

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

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

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

13

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

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

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

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

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

function divFunction(){
 //some code
}
10

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

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

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

9

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

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

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

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

Однако не слишком быстро отбрасывают идею декларативной разметки. Это место, и с такими каркасами, как 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 some amazing content. It very engaging. Right?">Click to toggle popover</button>

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

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

4

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

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

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

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

  • 2
    Даже если «лучше» не определено явно, почти никогда не стоит добавлять обработчики событий в вашу разметку напрямую.
  • 0
    @Jayraj, когда я сказал в своем ответе, что это хорошая идея?
Показать ещё 3 комментария
4
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

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

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

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

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

3

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

3

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

2

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

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

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

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

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

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

0

$ ( '# Sendmail'). Нажмите (функция() {

    var name        =   $('#name').val();
    var lastname        =   $('#lastname').val();
    var email       =   $('#email').val();
    var subject     =   $('#subject').val();
-1

Выполните JavaScript при нажатии кнопки:

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню