Функция on() библитеки jQuery

Reading time ~4 minutes

Маленькое вступление. Этой статьей я начинаю серию, посвященную работе с библиотекой jQuery. Точнее, я буду с помощью этих микро-статей самостоятельно изучать jQuery. И хотя при этом меня не оставляет постоянная мысль, что я делаю глупую и пустую работу (есть масса куда более лучших по объему и качеству ресурсов на эту тематику), все же мне так хочется. И это желание также продолжает основную идею этого бложика, его цель и смысл существования.

Смысл жизни данного бложика - быть записной книжкой для своего хозяина. Помогать ему в освоении безбрежных просторов Web по принципу “прочитал-усвоил-пересказал”. Ибо такой принцип мне кажется наиболее эффективным в деле изучения чего-то нового, особенно - если этого нового очень много.

Кроме того, мне работа с библиотекой jQuery нравиться! Она для меня - легкая и увлекательная игра; тот редкий случай, когда изучение программирования для меня дается одновременно очень легко и увлекательно. Чаще - что-то одно из двух.

Хватит лирики - переходим к практике.

Функция on()

Функция

1
.on()
является универсальным способом обработки событий на странице с помощью библиотеки jQuery. Почему универсальным? Давайте взглянем на синтаксис функции
1
.on()
:

.on(event, eventHandler);

… здесь

1
event
- это стандартное событие языка JavaScript:
1
blur
,
1
focus
,
1
focusin
,
1
focusout
,
1
load
,
1
resize
,
1
scroll
,
1
unload
,
1
click
,
1
dblclick
,
1
mousedown
,
1
mouseup
,
1
mousemove
,
1
mouseover
,
1
mouseout
,
1
mouseenter
,
1
mouseleave
,
1
change
,
1
select
,
1
submit
,
1
keydown
,
1
keypress
,
1
keyup
,
1
error
.

1
eventHandler
- это функция, обработчик события. Она создается для указанного события.

Хватит слов - краткий пример все “расскажет” лучше всяких слов.

$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

… или так -

function myFunction(){
  alert('Вы нажали на элемент "foo"');
});

$('#foo').on('click', myFunction);

То есть, при клике мыши (событие

1
click
) на элементе с идентификатором
1
#foo
запускается обработчик этого события - функция, которая в данном случае является всего лишь командой
1
alert
. Но эта функция может быть и более сложной, конечно.

Другими словами, вызывая функцию

1
.on()
, мы передаем ей два аргумента - событие (которое нужно отслеживать) и обработчик этого события. Поэтому функция
1
.on()
и называется универсальной функцией.

Существуют менее универсальные функции - одноименные (событиям) функции под каждое конкретное событие. Для сравнения, таких два примера абсолютно равнозначны, но имеют разный синтаксис:

$('#foo').click(function(){
  alert('Вы нажали на элемент "foo"');
})
$('#foo').on('click', function(){
  alert('Вы нажали на элемент "foo"');
});

Важное замечание: функция

1
.on()
была введена в jQuery взамен трех функций
1
.live()
,
1
.bind()
,
1
.delegate()
, которые считаются устаревшими и не поддерживаются современными версиями jQuery, начиная с версии 1.8.0.

В принципе, на этом можно остановиться, говоря о функции

1
.on()
. Для начала - этого достаточно.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024