Использование прямых методов событий
180Веб-программирование --- jQuery --- Использование прямых методов событий
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
В библиотеке jQuery определен ряд так называемых прямых (shorthand) методов, позволяющих связывать часто используемые события с функциями-обработчиками. Ниже эти функции описаны с аргументом function, который задает функцию-обработчик для данного события. Это наиболее распространенный способ работы с событиями, который полностью эквивалентен вызову метода bind(), но требует меньших усилий по набору текста (по крайней мере, с моей точки зрения) и более отчетливо показывает, с каким именно событием связывается обработчик.
Пример использования одного из прямых методов представлен ниже:
$(function() {
$('img').mouseenter(function() {
$(this).css("border", "thick solid red");
});
});
Это эквивалентно использованию метода bind() для привязки события mouseenter. В этом примере нет ничего сложного, и у вас не должно было возникнуть никаких неясностей относительно того, как он работает. Однако прямые методы можно использовать и в качестве аналогов метода trigger(). Для этого их следует вызывать без указания аргумента. Соответствующий пример представлен ниже:
$(function() {
$('img').bind("mouseenter", function() {
$(this).css("border", "thick solid red");
});
$("<button>Запустить</button>").appendTo("#buttonDiv").click(function (e) {
$('img').mouseenter();
e.preventDefault();
});
});
Здесь в документ добавляется кнопка (элемент button), после щелчка на которой выбираются элементы img и вызываются их обработчики события mouseenter. Ниже перечисляются различные категории прямых методов и событий, которым они соответствуют:
Метод | Описание |
---|---|
События документа | |
load() | Соответствует событию load, которое срабатывает после окончания загрузки всех подчиненных элементов и ресурсов документа |
ready() | Срабатывает после обработки всех элементов, содержащихся в документе, и завершения построения DOM-структуры |
unload() | Соответствует событию unload, которое срабатывает, когда пользователь покидает страницу |
События браузера | |
error() | Соответствует событию error, которое срабатывает при возникновении проблем с загрузкой внешних ресурсов, например изображений |
resize() | Соответствует событию resize, которое срабатывает при изменении размера окна браузера |
scroll() | Соответствует событию scroll, которое срабатывает при использовании полос прокрутки |
События мыши | |
click() | Соответствует событию click, которое срабатывает, когда пользователь выполняет щелчок мышью |
dbclick() | Соответствует событию dbclick, которое срабатывает, когда пользователь выполняет двойной щелчок мышью |
focusin() | Соответствует событию focusin, которое срабатывает при использовании полос прокрутки |
focusout() | Соответствует событию focusout, которое срабатывает, когда элемент теряет фокус |
hover(), hover(функция, функция) | Запускается, когда указатель мыши перемещается в область элемента или покидает ее. Если указана только одна функция, она используется в обоих случаях |
mousedown() | Соответствует событию mousedown, которое срабатывает при щелчке мышью над элементом |
mouseenter() | Соответствует событию mouseenter, которое срабатывает при наведении указателя мыши на область экрана, занимаемую элементом |
mouseleave() | Соответствует событию mouseleave, которое срабатывает, когда указатель мыши покидает область экрана, занимаемую элементом |
mousemove() | Соответствует событию mousemove, которое срабатывает, когда указатель мыши перемещается в пределах области экрана, занимаемой элементом |
mouseout() | Соответствует событию mouseout, которое срабатывает, когда указатель мыши покидает область экрана, занимаемую элементом |
mouseover() | Соответствует событию mouseover, которое срабатывает, когда указатель мыши находится в области экрана, занимаемой элементом |
mouseup() | Соответствует событию mouseup, которое срабатывает при отпускании ранее нажатой кнопки мыши над элементом |
События формы | |
blur() | Соответствует событию blur, которое срабатывает, когда элемент теряет фокус |
change() | Соответствует событию change, которое срабатывает при изменении значения элемента |
focus() | Соответствует событию focus, которое срабатывает, когда элемент получает фокус |
select() | Соответствует событию select, которое срабатывает при выборе пользователем значения элемента |
submit() | Соответствует событию submit, которое срабатывает при отправке формы пользователем |
События клавиатуры | |
keydown() | Соответствует событию keydown, которое срабатывает, когда пользователь нажимает клавишу на клавиатуре |
keypress() | Соответствует событию keypress, которое происходит, когда пользователь нажимает и отпускает клавишу на клавиатуре |
keyup() | Соответствует событию keyup, которое срабатывает, когда пользователь отпускает клавишу на клавиатуре |
Метод ready() заслуживает отдельного замечания. Ему нет соответствия среди событий DOM, но он чрезвычайно полезен при работе с jQuery.
Метод hover() предлагает удобный способ связывания функции-обработчика с событиями mouseenter и mouseleave. Если функции передаются два аргумента, то первый из них вызывается в ответ на событие mouseenter, а второй — в ответ на событие mouseleave. Если вы укажете только одну функцию, то она будет вызываться для обоих событий. Пример использования метода hover() представлен в примере ниже:
$(function() {
$('img').hover(handleMouseEnter, handleMouseLeave);
function handleMouseEnter(e) {
$(this).css("border", "thick solid red");
};
function handleMouseLeave(e) {
$(this).css("border", "");
}
});