События jQuery

jQuery специально сделан, чтобы отвечать на события на HTML странице.

Что такое События?

Все действия различных посетителей, на которые может ответить веб-страница, называют событиями.

Событие представляет точный момент, когда что-то происходит.

Примеры:

• Перемещение мыши над элементом

• Установка переключателя

• Щелчок по элементу

Термин "генерируется" часто используется с событиями. Пример: "Событие нажатия клавиши генерируется в момент, когда Вы нажимаете клавишу".

Вот некоторые общие события DOM:

События Мыши	События Клавиатуры	События Формы	События Документа/Окна
клик	нажатие клавиши	подтверждеине	загрузка
двойной клик	зажатие клавиши	изменение	изменение размера
мышь появляется над элементом	отпускане кнопки	фокусировка	прокрутка
мышь покидает элемент		потеря фокуса	выгрузка

Синтаксис jQuery Для Методов Событий

В jQuery у большинства событий DOM есть эквивалентный jQuery метод.

Чтобы присвоить событие щелчка всем параграфам на странице, можно сделать следующее:

$("p").click();

Следующий шаг должен определить то, что должно произойти, когда событие происходит. Следует передать функцию событию:

$("p").click(function(){
  // здесь идет действие!!
});

Обычно Используемые Методы Событий jQuery

$(document).ready()

Метод $(document).ready() позволяет нам выполнять функцию, когда документ полностью загружается. Это событие уже объяснялось в статье о Синтаксисе jQuery.

click()

Метод click() присоединяет функцию обработчика события к элементу HTML.

Функция выполняется, когда пользователь щелкает по элементу HTML.

Следующий пример говорит: Когда событие щелчка генерируется в <p> элементе; скрыть текущий <p> элемент:

Пример

$("p").click(function(){
  $(this).hide();
});

Попробуйте сами »

dblclick()

Метод dblclick() присоединяет функцию обработчика события к элементу HTML.

Функция выполняется, когда пользователь дважды щелкает по элементу HTML:

Пример

$("p").dblclick(function(){
  $(this).hide();
});

Попробуйте сами »

mouseenter()

Метод mouseenter() присоединяет функцию обработчика события к элементу HTML.

Функция выполняется, когда указатель мыши появляется над элементом HTML:

Пример

$("#p1").mouseenter(function(){
  alert("Указатель мыши над p1!");
});

Попробуйте сами »

mouseleave()

Метод mouseleave() присоединяет функцию обработчика события к элементу HTML.

Функция выполняется когда, указатель мыши оставляет элемент HTML:

Пример

$("#p1").mouseleave(function(){
  alert("Пока! Теперь вы покинули p1!");
});

Попробуйте сами »

mousedown()

Метод mousedown() присоединяет функцию обработчика событий к элементу HTML.

Функция выполняется, когда левая кнопка мыши зажимается, в то время как мышь находится над элементом HTML:

Пример

$("#p1").mousedown(function(){
  alert("Кнопка мыши зажата над p1!");
});

Попробуйте сами »

mouseup()

Метод mouseup() присоединяет функцию обработчика событий к элементу HTML.

Функция выполняется, когда левая кнопка мыши отпускается, в то время как мышь находится над элементом HTML:

Пример

$("#p1").mouseup(function(){
  alert("Кнопка мыши отпущена над p1!");
});

Попробуйте сами »

hover()

Метод hover() принимает две функции и является комбинацией методов mouseenter() и mouseleave().

Первая функция выполняется, когда мышь входит в зону элемента HTML, и вторая функция выполняется когда мышь покидает элемент HTML:

Пример

$("#p1").hover(function(){
  alert("Вы над p1!");
  },
  function(){
  alert("Пока! Теперь Вы покинули p1!");
});

Попробуйте сами »

focus()

Метод focus() присоединяет функцию обработчика событий к полю HTML-формы.

Функция выполняется, когда поле формы получает фокус:

Пример

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

Попробуйте сами »

blur()

Метод blur() присоединяет функцию обработчика событий к полю HTML-формы.

Функция выполняется, когда поле формы теряет фокус:

Пример

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

Попробуйте сами »

Далее: Обратный вызов jQuery