События мыши

События мыши

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(); // останавливает событие
});