.on() событие в jQuery

Сегодня рассмотрим важную тему реализации событий в jQuery за счет .on(), который был введен с версии 1.7 и позволяет объединять/заменять устаревшие методы .bind(), .delegate() и .live().

Помимо того, что .on() реализует все возможности устаревших методов, которые я перечислил, он также позволяет:

– работать с ajax подгруженным контентом (например, у меня была галерея, которая после нажатия кнопки “Показать еще” грузила фотографии к основным. Так вот при нажатии на новые фото, обработчик click уже не работал на них. Проблема решилась использованием on с событием click);
– возможность задания нескольких событий на один селектор (например, клик и перемещение мыши);
– возможность передавать данные в функцию;
– возможность назначать на каждое событие свой обработчик;
– и т.п.

Поддерживает события: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Стандартный синтаксис: .on(events, [selector], [data], handler)

events – события через пробел типа click resize focusout

[selector] – селектор по которому будут фильтроваться элементы, лежащие внутри уже найденных. В итоге, обработчик будет срабатывать только в том случае, если событие «поднялось» от одного из отфильтрованных элементов.

[data] — данные, передаваемые обработчику событий. В обработчике будут доступны в переменной event.data.

handler — функция, которая будет установлена в качестве обработчика. Вместо функции, можно указать значение false, это будет эквивалентно установке такой функции: function(){return false;}.

Пример: срабатывает на двух событиях сразу – аналог blur
$(‘#foo’).on(‘click mouseover’, function(){ действие });

Пример: фильтрует данные согласно внутреннего селектора, т.е ищет все div, а в них #foo1
$(‘div’).on(‘click’, “#foo1”, function(){ действие });

Пример: обработчик функция my()
$(‘#foo2’).on(‘click’, my);
function my() { alert(‘Вы нажали или навели на элемент “foo2″‘); }

Пример: обработчик функция my2() + data данные в функцию my2()
$(“#foo3”).on(“click”, {name: “Kari: “, phone: “21-56-77”}, my2);
function my2(myinfo){ alert(“Hello ” + myinfo.data.name + myinfo.data.phone ); }

Пример: аналог live
$(document).on(“click”,”#foo6″, function(){ alert(“аналог live”); });

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

Дополнительный синтаксис: .on(events-map, [selector], [data])

events-map – объект, в котором нужно перечислить типы обрабатываемых событий и соответствующие им обработчики. Задается в формате {events-1:handler-1, events-2:handler-2, …}, где events-i и handler-i соответствуют параметрам events и handler в первом варианте метода (описанном выше).

Пример: на один и тот же элемент – разные функции (my3 и my4) в зависимости от события
$(“#foo5”).on({“click” : my3, “mouseout” : my4, ‘dblclick’: function(){alert(‘Вы дваждлы кликнули на элемент foo5’)} });