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

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

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

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

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

Функция on()

Функция

1

.on()

1

.on()

.on(event, eventHandler);

… здесь

1

event

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()

1

.live()

1

.bind()

1

.delegate()

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

1

.on()