jQuery: обработка событий онлайн урок.


В jQuery предусмотрен ряд разнообразных методов для обработки различных событий. Одним из способов обработки событий является метод on(), который принимает аргумент в виде названия события и анонимную функцию, которая фактически является обработчиком события.

$( селектор ) . on ( событие, function() { ... } )

Рассмотрим несколько популярных событий. Для этого воспользуемся фрагментом HTML кода из предыдущего урока и добавим в него скрипт с обработкой некоторый событий



Первое событие в этом примере - это событие ready готовности DOM. Оно уже известно нам по прошлым урокам - вместо on('ready') мы использовали ready(). В качестве обработчика будет появляться модальное окно с сообщением DOM is ready.

Второе событие - это событие click клика мышки по выбранной коллекции элементов. В данном случае - это коллекция элементов списка. Функция-обработчик заменяет текст внутри блока content на текст названия элемента меню. Для этого использован селектор this, который определяет текущий элемент, который подвергается событию клика. Также был использован метод text() который позволяет управлять содержимым тега.

Третье событие - наведение курсора на элемент hover. Обработчик оставляет запись в консоли.

Вместо метода on() можно использовать одноименные методы событий - т.е. click(), hover(), ready(), mouseover() и т.п.

Рассмотрим пример использования этих методов на похожем примере:



Сначала обрабатывается событие загрузки DOM. В качестве обработчика этого события указаны скрипты для нескольких событий. При клике на элемент с id="current" срабатывает обработка события, в элемент с id="target" выводится текст "clicked". Аналогично, при наведении курсора мыши на область элемента li - выводится текст 'mouse on the element', при выведении за пределы - 'mouse out of the element'.