Сегодня рассмотрим важную тему реализации событий в 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')} });