Метод on - добавление функции-обработчика событий к элементу
Метод on позволяет добавить обработчик
событий к элементу. Чтобы удалить обработчик
можно воспользоваться методом
off,
чтобы событие сработало только один раз, а затем
обработчик удалил сам себя - воспользуйтесь методом
one.
Элементы, к которым мы привязываем обрабочик должны
существовать во время вызова on.
Синтаксис
Так мы добавляем обработчик событий к элементу,
в качестве первого параметра в виде строки передается
одно или несколько событий разделенных пробелами, вторым
параметром передаем допольнительный фильтрующий
селектор потомков внутри элемента, третьим - дополнительные
данные, которые передаются в обработчик в свойстве
event.data
при срабатывании события. Второй и третий парметры
необязательны. Четвертым передаем функцию-обработчик,
в которую передается объект события и необязательные
дополнительные параметры. Если вместо функции-обработчика
передать false, то функция просто вернет false:
$(селектор).on(события, [селектор], [данные], функция-обработчик(объект события, [дополнительные параметры]));
Можно воспользоваться методом on по-другому,
тогда в первый параметр передается
объект JavaScript, где ключи - тип события, а
значения - функции-обработчики, вызываемые
для событий:
$(селектор).on({'тип события': handler}, [селектор], [данные]);
Если мы не передаем дополнительный селектор, то событие срабатывает на элементе, к которому мы прикрепляем обработчик, в противном случае - на элементе-потомке, который который соответствует этому селектору (делегированные события). Один и тот же обработчик события может быть привязан к элементу несколько раз.
Пример
Давайте в alert,
отобразим текст абзаца с #test при
клике по нему, клики по другим абзацам ни к чему
не приведут:
<p>text1</p>
<p id="test">text2</p>
<p>text3</p>
$('#test').on('click', function() {
alert( $(this).text() );
});
Пример
Давайте при клике на абзац выведем данные, которые
мы передали в метод on. Воспользуемся
функцией-обработчиком testFunc,
которую мы создали:
<p>click</p>
function testFunc(event) {
alert(event.data.text);
}
$('p').on('click', {text: 'aaa'}, testFunc);
Смотрите также
-
метод
off,
который позволяет удалить обработчик событий у элемента -
метод
one,
который позволяет событию сработать один раз, а затем автоматически удалить обработчик -
объект
event,
который содержит информацию о событии -
метод
trigger,
который позволяет запустить все обработчики событий, привязанные к элементу для событий заданного типа -
JavaScript метод
bind,
который позволяет привязать контекст к функции