У меня есть огромное приложение jQuery, и я использую следующие два метода для событий click.
Первый метод
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
Второй метод
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
Я использую первый или второй метод в своем приложении. Какая из них лучше? Лучше для производительности? И стандартный?
Использование $('#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);
Зачем использовать 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
Для повышения производительности используйте собственный 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
Насколько я понимаю, ваш вопрос заключается не в том, следует ли использовать jQuery, либо нет. Это скорее: лучше ли привязывать события inline в HTML или через прослушиватели событий?
Встроенная привязка устарела. Более того, вы можете привязать только одну функцию к определенному событию.
Поэтому я рекомендую использовать прослушиватели событий. Таким образом, вы сможете связать многие функции с одним событием и впоследствии отвязать их позже, если это необходимо. Рассмотрим этот чистый код JavaScript:
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
Это работает в большинстве современных браузеров.
Однако, если вы уже включили jQuery в свой проект, просто используйте jQuery: .on или .click.
$('#myDiv').click лучше, поскольку он отделяет код JavaScript от HTML. Нужно попытаться сохранить поведение < и структуру. Это очень помогает.
Пойдите для этого, поскольку это даст вам как стандартные, так и рабочие характеристики.
$('#myDiv').click(function(){
//Some code
});
Как второй метод - простой JavaScript-код и быстрее, чем jQuery. Но здесь производительность будет примерно одинаковой.
Вы можете комбинировать их, использовать jQuery для привязки функции к клику
<div id="myDiv">Some Content</div>
$('#myDiv').click(divFunction);
function divFunction(){
//some code
}
IMHO, onclick - предпочтительный метод .click только при выполнении следующих условий:
Я сформировал это мнение из-за того, что двигатели JavaScript на мобильных устройствах в 4-7 раз медленнее, чем их настольные аналоги, выполненные в одном поколении. Я ненавижу это, когда я посещаю сайт на своем мобильном устройстве и получаю дрожащую прокрутку, потому что jQuery связывает все события за счет моего пользовательского опыта и времени автономной работы. Еще один недавний фактор поддержки, хотя это должно быть только проблемой государственных агентств;), у нас появился всплывающий всплывающий окно IE7 с сообщением, в котором говорится, что процесс JavaScript длится... ждать или отменить процесс. Это происходило каждый раз, когда было множество элементов для привязки через jQuery.
Разница в работах. Если вы используете click(), вы можете добавить несколько функций, но если вы используете атрибут, будет выполнена только одна функция - последняя.
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 some amazing content. It very engaging. Right?">Click to toggle popover</button>
Источник: http://getbootstrap.com/javascript/#popovers
Примечание Основным недостатком второго примера является загрязнение глобального пространства имен. Это можно обойти, либо используя третью альтернативу выше, либо фреймворки, такие как Angular и их атрибуты ng-click с автоматической областью.
Ни один из них не лучше, поскольку они могут использоваться для разных целей. onClick (должно быть onClick) работает очень немного лучше, но я очень сомневаюсь, что вы заметите разницу.
Стоит отметить, что они делают разные вещи: .click может быть привязан к любой коллекции jQuery, тогда как onClick должен использоваться inline для элементов, к которым вы хотите привязаться. Вы также можете привязать только одно событие к использованию onClick, тогда как .click позволяет продолжать связывать события.
По-моему, я был бы последователен и просто использовал бы .click всюду и сохранил бы весь код JavaScript и отделил бы от HTML.
Не используйте onClick. Нет никаких оснований использовать его, если вы не знаете, что делаете, и вы, вероятно, этого не делаете.
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
onclick, onmouseover, onmouseout и т.д. события на самом деле вредны для производительности (в Internet Explorer, в основном, go figure). Если вы используете Visual Studio, при запуске страницы с ними каждый из них создаст отдельный блок SCRIPT, занимающий память, и тем самым замедляя производительность.
Не говоря уже о том, что вы должны разделение проблем: JavaScript и макеты должны быть разделены!
Всегда лучше создавать evenHandlers для любого из этих событий, одно событие может захватывать сотни/тысячи элементов, а не создавать тысячи отдельных блоков SCRIPT для каждого из них!
(Кроме того, все остальные говорят.)
В большинстве случаев собственные методы JavaScript являются лучшим выбором для jQuery, когда производительность является единственным критерием, но jQuery использует JavaScript и делает разработку легкой. Вы можете использовать jQuery, так как он не слишком сильно ухудшает производительность. В вашем конкретном случае разница в производительности невыносима.
Ну, одна из главных идей jQuery - отделить JavaScript от неприятного HTML. Первый способ - путь.
Первый способ - предпочесть. Он использует расширенную модель регистрации событий [s], что означает, что вы можете присоединить несколько обработчиков к одному и тому же элементу. Вы можете легко получить доступ к объекту события, и обработчик может жить в любой области функции. Кроме того, он является динамическим, то есть он может быть вызван в любое время и особенно хорошо подходит для динамически генерируемых элементов. Независимо от того, используете ли вы jQuery, другая библиотека или собственные методы напрямую не имеют значения.
Второй метод, используя встроенные атрибуты, требует много глобальных функций (что приводит к загрязнению пространства имен) и смешивает контент/структуру (HTML) с поведением (JavaScript). Не используйте это.
Невозможно легко ответить на вопрос о производительности или стандартах. Эти два метода просто совершенно разные и делают разные вещи. Первый - более сильный, а второй - презренный (считается плохим стилем).
Первый способ использования onclick - это не jQuery, а просто Javascript, поэтому вы не получаете накладных расходов на jQuery. Способ jQuery может расширяться с помощью селекторов, если вам нужно добавить его к другим элементам, не добавляя обработчик события к каждому элементу, но поскольку у вас есть это сейчас, это просто вопрос, если вам нужно использовать jQuery или нет.
Лично, поскольку вы используете jQuery, я бы придерживался его, поскольку он является последовательным и отделяет разметку от script.
$ ( '# Sendmail'). Нажмите (функция() {
var name = $('#name').val();
var lastname = $('#lastname').val();
var email = $('#email').val();
var subject = $('#subject').val();
Функция Onclick Jquery
$('#selector').click(function(){//Your Functionality });
Выполните JavaScript при нажатии кнопки:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>