| События |
|
Click
|
$('p').click(function() {
$(this).slideUp();
});
|
Метод для события клик |
| .on() |
$(".link-js").on("click", function(event) {
event.preventDefault();
$(this).text("Click");
});
// с методом on() можно навешивать сразу несколько событий через пробел
$(this).on('click mouseover mouseout', function(e) { ...
|
с методом on() можно навешивать сразу несколько событий через пробел |
| .off() |
// событие клика будет отслеживаться только 1 раз
$('p').click(function() {
$(this).after('<p>Some text</p>');
$(this).off();
});
|
Убирает элементы для отслеживания на события, которые были заданы ранее (если нужно задать клик на элемент только 1 раз) |
| .each() |
// Обрабатываем все элементы списка методом .each()
$('.list-item').each(function() {
// сохраняем выпадающий текст внутри текущего элемента списка в пер. text
var text = $('.js-drop-down-text', this);
// Улавливаем клик по ссылке внутри текущего элемента
$('.js-details', this).on('click', function(e) {
e.preventDefault();
// меняем стилизацию кнопки
$(this).toggleClass('active');
// показываем-скрываем текст при клике
text.slideToggle();
});
});
|
Если нужно перебрать несколько элементов и отловить какое-либо событие внутри текущего элемента |
| Mouse actions |
.dbclick // Двойной клик
.mousedown // Нажим на клик, без отпуска
.mouseup // Отпуск клика
.mouseover // Аналог :hover в css
.mouseout // Когда убираете курсор с элемента
.mousemove // При перемещении курсора (выполняется всегда)
.scroll // При скроле (Home, End, PgUp, PgDown)
|
Клик и события с мышью |
| Keyboard |
.keypress // Нажатие на клавишу
.keydown // Нажим на клавишу, без отпуска
.keyup // Отпуск клавиши
|
События с клавиатурой |
| Forms |
.submit // отправка формы (нажатие на Enter)
.reset // сброс полей формы
.change // изменение значений полей формы, переключение
.focus // фокусировка на поле формы (клавиша Tab)
.blur // противоположное focus, выход из фокуса
|
События с формами |
| Document |
.load // при загрузке страницы
.unload // при переходе на другую страницу
.resize // при изменении размеров окна
.ready // загрузка документа
|
События с документом |
| Координаты |
.pageX, .pageY |
|
| Методы |
| .hover() |
// принимает анонимную функцию в параметр
var a = $("div").eq(2).hover(function() {
console.info(a.text().toLowerCase());
});
// c двумя функциями (но не более)
$(#btn).hover(function() {...}, function() {...});
// эти функции можно называть
function closeMenu() {...}
function showMenu() {...}
// и можно указывать только названия
$(#btn).hover(closeMenu, showMenu);
|
Наведение на элемент |
| .trigger() |
|
|
| .resize() |
|
|