Маленькое вступление. Этой статьей я начинаю серию, посвященную работе с библиотекой jQuery. Точнее, я буду с помощью этих микро-статей самостоятельно изучать jQuery. И хотя при этом меня не оставляет постоянная мысль, что я делаю глупую и пустую работу (есть масса куда более лучших по объему и качеству ресурсов на эту тематику), все же мне так хочется. И это желание также продолжает основную идею этого бложика, его цель и смысл существования.
Смысл жизни данного бложика - быть записной книжкой для своего хозяина. Помогать ему в освоении безбрежных просторов Web по принципу “прочитал-усвоил-пересказал”. Ибо такой принцип мне кажется наиболее эффективным в деле изучения чего-то нового, особенно - если этого нового очень много.
Кроме того, мне работа с библиотекой jQuery нравиться! Она для меня - легкая и увлекательная игра; тот редкий случай, когда изучение программирования для меня дается одновременно очень легко и увлекательно. Чаще - что-то одно из двух.
Хватит лирики - переходим к практике.
Функция on()
Функция .on()
является универсальным способом обработки событий на странице с помощью библиотеки jQuery. Почему универсальным? Давайте взглянем на синтаксис функции .on()
:
.on(event, eventHandler);
… здесь event
- это стандартное событие языка JavaScript: blur
, focus
, focusin
, focusout
, load
, resize
, scroll
, unload
, click
, dblclick
, mousedown
, mouseup
, mousemove
, mouseover
, mouseout
, mouseenter
, mouseleave
, change
, select
, submit
, keydown
, keypress
, keyup
, error
.
… eventHandler
- это функция, обработчик события. Она создается для указанного события.
Хватит слов - краткий пример все “расскажет” лучше всяких слов.
$(#foo).on(click, function(){
alert(Вы нажали на элемент "foo");
});
… или так -
function myFunction(){
alert(Вы нажали на элемент "foo");
});
$(#foo).on(click, myFunction);
То есть, при клике мыши (событие click
) на элементе с идентификатором #foo
запускается обработчик этого события - функция, которая в данном случае является всего лишь командой alert
. Но эта функция может быть и более сложной, конечно.
Другими словами, вызывая функцию .on()
, мы передаем ей два аргумента - событие (которое нужно отслеживать) и обработчик этого события. Поэтому функция .on()
и называется универсальной функцией.
Существуют менее универсальные функции - одноименные (событиям) функции под каждое конкретное событие. Для сравнения, таких два примера абсолютно равнозначны, но имеют разный синтаксис:
$(#foo).click(function(){
alert(Вы нажали на элемент "foo");
})
$(#foo).on(click, function(){
alert(Вы нажали на элемент "foo");
});
Важное замечание: функция .on()
была введена в jQuery взамен трех функций .live()
, .bind()
, .delegate()
, которые считаются устаревшими и не поддерживаются современными версиями jQuery, начиная с версии 1.8.0.
В принципе, на этом можно остановиться, говоря о функции .on()
. Для начала - этого достаточно.
Комментарии