jQuery.click() vs onClick

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

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

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

являются старыми и могут быть легко перезаписаны.

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

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

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

MDN Reference: https://developer.mozilla.org/en-US/docs/DOM/event

Для лучшей производительности, использовать родной JavaScript. Для более быстрого развития, использовать jQuery. Проверить сравнение в производительности в в jQuery производительности против Элемент.

Я'ве сделали тест в Firefox 16.0 32-бит на Windows сервер 2008 R2 / 7 64-бит

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

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

Тестирование в Chrome 22.0.1229.79 32-бит на Windows сервер 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 или с помощью прослушивателей событий?

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

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

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

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

Однако, если вы уже включили jQuery в вашем проекте — просто использовать jQuery: `.на "или".нажмите кнопку функция.

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

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

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

function divFunction(){
 //some code
}

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

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

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

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

ИМХО, функция onclick-это предпочтительный метод .нажмите кнопку только тогда, когда выполнены следующие условия:

• есть много элементов на странице
• только одно событие, чтобы быть зарегистрированным для события click
• Вы're беспокоит производительность мобильных/жизнь батареи

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

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

[Демо][1]

В формате 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')" )

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

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

Однако Дон'т выбросить идею из декларативной разметки слишком быстро. Это's место, и с фреймворками, как в AngularJS, является центральным.

Там должно быть понимание того, что вся в <див ИД="по-myDiv-то" функция onclick="и divFunction()" и>содержимое</див> опустили так сильно, потому что он подвергся насилию со стороны некоторых застройщиков. Так он дошел до точки святотатственно пропорции, как и "таблицы". Некоторые застройщики на самом деле избегайте таблиц для табличных данных. Это's является идеальным примером людям, действующим без понимания.

Хотя мне нравится идея держать мое поведение отдельно от моих взглядов. Я не вижу никакой проблемы с разметкой объявления что он делает (не как он это делает, что'ы поведения). Это может быть в виде реального атрибут onclick, или настраиваемого атрибута, как компоненты загружает код JavaScript.

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

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

Пример прихлоп:

Click to toggle popover

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

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

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

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

На мой взгляд, я бы последовательно и просто использовать.нажмите кнопку` везде и держать все мои JavaScript-код вместе и отделены от HTML-кода.

Дон'т использовать щелчку. Там isn'т никаких причин, чтобы использовать его, если вы не знаете, что вы'повторно делать, и вы, вероятно, Дон'т.

функция onclick, onmouseover модели, onmouseout и т. д. события, на самом деле БАД для повышения производительности (в интернет&ампер;усилитель; nbsp;Обозреватель в основном, пойди разберись). Если вы код используя библиотеку, при запуске страницы с этими, каждый из них будет создан отдельный блок скрипта, занимая память, и, следовательно, снижения производительности.

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

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

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

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

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

Первый метод является более предпочтительным. Он использует [расширенную модель регистрации событий] (http://www.quirksmode.org/js/events_advanced.html), что означает, что вы можете прикрепить несколько обработчиков к одному и тому же элементу. Вы можете легко получить доступ к объекту события, а обработчик может находиться в любой функции. Кроме того, он динамичен, то есть может быть вызван в любое время, и особенно хорошо подходит для динамически создаваемых элементов. Не имеет значения, используете ли вы jQuery, другую библиотеку или собственные методы напрямую.

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

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

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

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

Функцию Onclick На JQuery

$('#селектор').нажмите кнопку(функция(){ //Ваши Возможности });