События мыши
click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove
События документа/окна
load, resize, scroll, unload
События форм
submit, reset, change, focus, blur
События клавиатуры
keypress, keydown, keyup
Использование событий
$('a').click(function() {});
Ожидание загрузки HTML-кода
$(function() {})// сокращенная запись $(document).ready(function() {})
ready() – ожидание загрузки HTML-кода, без ожидания загрузки изображений и роликов
альтернатива – размещение скрипта перед закрывающим тегом body.(загрузка и запуск кода замедлит браузер до тех пор, пока сценарий не загрузится и не прекратит выполняться) – минус – модификация HTML по мере прогрузки скриптов, и если приложение не работает без js.
События наведения и смещения указателя мыши
$('#селектор').hover(функция1, функция2); $('menu').hover(function(){ $('submenu').show(); },//окончание события mouseover function() { $('submenu').hide(); }//окончание события mouseout );//окончание события hover
Объект события
Во время запуска события браузер записывает информацию о нем и сохраняет его в так называемом объекте события. Объект события содержит данные, собранные в момент, когда произошло событие, такие, как координаты указателя мыши по горизонтали и вертикали, элемент, который инициировал событие, была ли нажата при запуске события клавиша Shift.
$(document).click(function(evt) { var xPos = evt.pageX; var yPos = evt.pageY; alert('X: ' + xPos + ' Y: ' + yPos); }); //конец события click
В каждом браузере могут быть разные свойства, общие: pageX, pageY, screenX, screenY, shiftKey, which (используется с событием нажатия клавиши для определения числового кода нажатой клавиши. Можно узнать клавишу преобразовав с помощью метода String.fromCharCode(evt.which); ), target, data.
Отмена обычного поведения событий
$('#menu').click(function(evt) { //some code evt.preventDefault(); // не переходи по ссылке // другой вариант return false; });
Удаление событий
$('a').mouseover(function(){ //some action }); $('#disable').click(function() { $('a').off('mouseover') // удаляет событие mouseover, или все события, если не передать аргументы });
Остановка события (всплытие события)
Каждый из элементов-предков так же может реагировать на событие дочернего элемента.
$('#thelink').click(function(evt) { //some action evt.stopPropagation(); // останавливает событие });