# Метод 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`,
  который позволяет привязать контекст к функции

← →
↑