jQuery Методы событий

jQuery адаптирован для реагирования на события на HTML-странице.

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

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

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

Пример:

перемещение курсора мыши над элементом
выбор радиокнопки
нажатие на элемент

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

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

События мыши	События клавиатуры	События формы	События документа/окна
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Синтаксис 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");
});

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

Метод on()

Метод on() подключает один или несколько обработчиков событий для выбранных элементов.

Присоедините событие клика к элементу <p>:

Пример

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

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

Присоедините несколько обработчиков событий к элементу <p>:

Пример

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

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

jQuery Упражнения