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

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

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

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

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

Примеры:

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

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

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

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

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

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

Чтобы назначить событие клика всем абзацам на странице, вы можете сделать это:

$("p").click();

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

$("p").click(function(){
// action goes here!!
});

Часто используемые методы обработки событий jQuery

$(документ).готов()

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

щелчок()

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

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

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

Пример

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

двойной клик()

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

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

Пример

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

мышьэнтер()

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

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

Пример

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

мышиный лист ()

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

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

Пример

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

указатель мыши()

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

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

Пример

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

наведение мыши()

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

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

Пример

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

наведите ()

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

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

Пример

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

фокус()

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

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

Пример

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

размытие()

Метод 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-упражнения