Правильное написание событий в jquery

@sly444 · Регистрация: 29.12.2010

Студворк — интернет-сервис помощи студентам

Добрый день!
Я всегда в своих скриптах, если нужно обработать клик, пишу такую конструкцию:

JavaScript
1
$('.class').click(function(event) { });

Однако постоянно, когда я разбираю чужие скрипты, будь то новые или старые - везде одна и та же запись:

JavaScript
1
$('.class').bind('click', function(event) { });

Либо

JavaScript
1
$('.class').on('click', function(event) { });

Мое использование, насколько я знаю, это краткая запись вышеупомянутых строк. Так вопрос - почему все, или почти все пользуются не краткой надписью, а длинной? Про навешивание обработчика типа:

JavaScript
1
$(document).on('click', '.class', function(event) { });

..я знаю, однако вышеупомянутые строки все же используют самый обычный клик. Я вот понять не могу, это я не правильно пишу, или остальные. Если правильно и так и этак (как везде и написано), то почему я один пользуюсь краткой записью?

@sad67man · 28.12.2016, 02:24

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

@Balanaar · 28.12.2016, 09:46

sly444, самое главное отличие $.on() от $.click() в том, что $.click() создаёт множество обработчиков для каждого элемента, попадающего в выборку. Динамически добавленные элементы не будут иметь обработчик события, пока вы не вызовите функцию заново.
$.on() создаёт один обработчик для всех элементов выборки. Во-первых, это более оптимально в плане затрат памяти. Во-вторых, обработчик будет действовать для динамически добавленных элементов тоже.
http://codepen.io/anon/pen/QGXzwv

HTML5
1
2
3
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="alert">STATIC ALERT</div>
<div>NO ALERT</div>

CSS
1
2
3
4
div {
  border: 1px solid black;
  display: inline;
}

JavaScript
1
2
3
4
$('body').on('click','div.alert',function() {
  alert('Hi');
});
$('body').append('<div class="alert">DYNAMICALLY ADDED ALERT</div>');

@sad67man · 28.12.2016, 11:54

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

@sly444 · 28.12.2016, 18:55 **[ТС]**

Сообщение от Balanaar

$.on() создаёт один обработчик для всех элементов выборки

Скажите, а что значит для всех элементов выборки? Например, у нас есть кнопка с классом btn. Если я использую:

JavaScript
1
$('.btn').click(function)

то здесь писали, что создается много обработчиков. А чтобы это значило? Ведь на странице у меня есть только одна такая кнопка с таким классом? Или я что-то не так понимаю?

Сообщение от sad67man

чем ближе будет прикреплен ловящий события обработчик (outer-элемент) к вершине дерева DOM, тем чаще он будет вызываться, поскольку он будет ловить события всплывшие от большего количества элементов.

Для меня тоже не совсем ясно. Опять же на примере одной кнопки с классом. Обработчик же вызывается после активизации события, в нашем случае, клика, разве не так? Тогда почему какой-то обработчик должен вызываться чаще, какой-то реже?

@sad67man · 28.12.2016, 19:08

sly444,
Eсли вешать обработчик на сами элементы, то разницы никакой нет

JavaScript
1
2
3
$('.btn').click(function)
//либо
$('.btn').on('click', function)

Так как .click(function) является полным аналогом .on('click', function), так сказать частным случаем метода .on()
По поводу количества обработчиков и количества срабатываемых событий, это при делегировании событий, то о чем вы писали в своем посте

JavaScript
1
$(document).on('click', '.class', function(event) { });

Допустим, если у вас есть какой-нибудь список ul>li и вам нужно на li повесить клик, Если элементов очень много к примеру 100, либо li динамически создаются, то предлагается использовать делегирование событий. повесить событие не на li, а на ul

JavaScript
1
$('ul').on('click', 'li')

В таком случае вместо того, чтоб создать 100 обработчиков, создастся 1.
В такой конструкции, как я уже написал ранее, делегировать обработчик нужно ближайшему предку. Крайне не рекомендуется вешать событие на document или body, так как они будут обрабатываться при каждом клике пользователя, смотреть от какого элемента пришел клик, и сверять со всеми делегированными событиями.

@sly444 · 28.12.2016, 19:15 **[ТС]**

sad67man, Отлично объяснили! Теперь все стало понятно. А скажите, пожалуйста, с точки зрения теории, почему при динамическом добавлении какого-либо элемента, обработчик

JavaScript
1
click(function)

не работает. Обязательно надо навешивать именно:

JavaScript
1
$(document).on('click', '.class', function(event) { });

@sad67man · 28.12.2016, 19:41

sly444, Потому что когда вы вешаете событие click, такого элемента еще нет. И когда вы его динамически создадите, у него не будет никаких обработчиков.
А при такой конструкции

JavaScript
1
$(document).on('click', '.class', function(event) { });

Вы вешаете обработчик на document, который уже существует. Далее когда вы делаете клик по какому-либо элементу, то событие передается и для всех его предков. Событие доходит до document-а, на нем весит обработчик клика, после чего он сверяет по селектору, указанному вами, со всеми элементами, по которым прошелся клик, после чего вызывается функция, в случае совпадения.

Добавлено через 6 минут
sly444, Это и называется делегирование событий. Т.е. вы как бы передаете полномочия обрабатывать события другому элементу.

Добавлено через 11 минут
sly444, Но опять же на document нельзя вешать. Нужно вешать на ближайший предок элемента, как это возможно. Потому что у document-а большая вложенность, при каждом клике делегированное событие будет обрабатываться для всех элементов по иерархии от источника события. Соответственно, если вы вешаете несколько делегированных обработчиков, то они все так же будут обрабатываться.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	28.12.2016, 02:24
	sly444, Правильно и так и так. Вообще в данном случае это не важно, сам пользуюсь частенько .click() Но, на сколько я знаю, некоторым это не нравится, когда используют методы .click() , .change() и т.п. и призывают придерживаться единообразию кода. Не важно какое событие вы навешиваете - метод и структура одна. Когда все-таки перед программистом встает вопрос, как же все-таки писать лучше и вы сомневаетесь. Я думаю нужно исходить из того, какой код будет считаться более грамотным и вызывать меньше претензий. 1

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	28.12.2016, 11:54
	Делегированная обработка событий имеет и обратную сторону медали — чем ближе будет прикреплен ловящий события обработчик (outer-элемент) к вершине дерева DOM, тем чаще он будет вызываться, поскольку он будет ловить события всплывшие от большего количества элементов. При каждом таком вызове он будет производить проверку, не является ли источник этого события нужным элементом. Таким образом, чем выше в иерархии документа будет установлен делегированный обработчик, тем больше это будет вызывать вычислительных затрат. Поэтому, стоит привязывать делегированные обработчики как можно ближе к интересующим элементам. 2

Правильное написание событий в jquery

Решение