Использование прямых методов событий

180

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

В библиотеке 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. Ниже перечисляются различные категории прямых методов и событий, которым они соответствуют:

Прямые методы jQuery для работы с событиями
Метод Описание
События документа
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", "");
    }
	
});
Пройди тесты
Лучший чат для C# программистов