События jQuery
jQuery специально сделан, чтобы отвечать на события на HTML странице.
Что такое События?
Все действия различных посетителей, на которые может ответить веб-страница, называют событиями.
Событие представляет точный момент, когда что-то происходит.
Примеры:
Перемещение мыши над элементом
Установка переключателя
Щелчок по элементу
Термин "генерируется" часто используется с событиями. Пример: "Событие нажатия клавиши генерируется в момент, когда Вы нажимаете клавишу".
Вот некоторые общие события DOM:
События Мыши | События Клавиатуры | События Формы | События Документа/Окна |
---|---|---|---|
клик | нажатие клавиши | подтверждеине | загрузка |
двойной клик | зажатие клавиши | изменение | изменение размера |
мышь появляется над элементом | отпускане кнопки | фокусировка | прокрутка |
мышь покидает элемент | потеря фокуса | выгрузка |
Синтаксис jQuery Для Методов Событий
В jQuery у большинства событий DOM есть эквивалентный jQuery метод.
Чтобы присвоить событие щелчка всем параграфам на странице, можно сделать следующее:
Следующий шаг должен определить то, что должно произойти, когда событие происходит. Следует передать функцию событию:
// здесь идет действие!!
});
Обычно Используемые Методы Событий jQuery
$(document).ready()
Метод $(document).ready() позволяет нам выполнять функцию, когда документ полностью загружается. Это событие уже объяснялось в статье о Синтаксисе jQuery.
click()
Метод click() присоединяет функцию обработчика события к элементу HTML.
Функция выполняется, когда пользователь щелкает по элементу HTML.
Следующий пример говорит: Когда событие щелчка генерируется в <p> элементе; скрыть текущий <p> элемент:
dblclick()
Метод dblclick() присоединяет функцию обработчика события к элементу HTML.
Функция выполняется, когда пользователь дважды щелкает по элементу HTML:
mouseenter()
Метод mouseenter() присоединяет функцию обработчика события к элементу HTML.
Функция выполняется, когда указатель мыши появляется над элементом HTML:
mouseleave()
Метод mouseleave() присоединяет функцию обработчика события к элементу HTML.
Функция выполняется когда, указатель мыши оставляет элемент HTML:
mousedown()
Метод mousedown() присоединяет функцию обработчика событий к элементу HTML.
Функция выполняется, когда левая кнопка мыши зажимается, в то время как мышь находится над элементом HTML:
mouseup()
Метод mouseup() присоединяет функцию обработчика событий к элементу HTML.
Функция выполняется, когда левая кнопка мыши отпускается, в то время как мышь находится над элементом HTML:
hover()
Метод hover() принимает две функции и является комбинацией методов mouseenter() и mouseleave().
Первая функция выполняется, когда мышь входит в зону элемента HTML, и вторая функция выполняется когда мышь покидает элемент HTML:
Пример
alert("Вы над p1!");
},
function(){
alert("Пока! Теперь Вы покинули p1!");
});
Попробуйте сами »
focus()
Метод focus() присоединяет функцию обработчика событий к полю HTML-формы.
Функция выполняется, когда поле формы получает фокус:
Пример
$(this).css("background-color","#cccccc");
});
Попробуйте сами »
blur()
Метод blur() присоединяет функцию обработчика событий к полю HTML-формы.
Функция выполняется, когда поле формы теряет фокус: