jQuery Event Methods
jQuery разработан специально для реагирования на события в HTML-страницы.
Что такое события?
Все различные действия посетителя, на которые может отвечать веб-страница, называются событиями.
Событие представляет собой точный момент, когда что-то происходит.
Примеры:
- Перемещение указателя мыши на элемент
- Выбор переключателя
- щелчок на элементе
Термин "пожары/уволенные" часто используется с событиями. Пример: "нажатие клавиши происходит, когда вы нажимаете клавишу".
Вот некоторые общие события DOM:
| События мыши | События клавиатуры | События формы | События документа/окна |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Синтаксис JQuery для методов событий
В jQuery большинство событий DOM имеют эквивалентный метод jQuery.
Чтобы назначить событие Click всем абзацам на странице, можно сделать следующее:
$("p").click();
Следующим шагом является определение того, что должно произойти при срабатывании события. Необходимо передать функцию в событие:
$("p").click(function(){
// action goes here!!
});
Часто используемые методы событий jQuery
$ (документ). Готово ()
Метод $ (Document). ready () позволяет нам выполнять функцию при полной загрузке документа. Это событие уже описано в раздел синтаксиса jQuery .
click()
Метод Click() прикрепляет функцию обработчика событий к элементу HTML.
Функция выполняется, когда пользователь щелкает элемент HTML.
В следующем примере говорится: при срабатывании события Click на элементе <p>; Скрытие текущего элемента <p>:
Пример
$("p").click(function(){
$(this).hide();
});
dblclick()
Метод DblClick() прикрепляет функцию обработчика событий к элементу HTML.
Функция выполняется, когда пользователь дважды щелкает элемент HTML:
Пример
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
Метод MouseEnter() прикрепляет функцию обработчика событий к элементу HTML.
Функция выполняется, когда указатель мыши вводит элемент HTML:
Пример
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
MouseLeave()
Метод MouseLeave () прикрепляет функцию обработчика событий к элементу HTML.
Функция выполняется, когда указатель мыши покидает HTML-элемент:
Пример
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
MouseDown()
Метод MouseDown () прикрепляет функцию обработчика событий к элементу HTML.
Функция выполняется, когда левая, средняя или правая кнопка мыши нажата, в то время как мышь находится над HTML-элементом:
Пример
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
MouseUp()
Метод MouseUp () прикрепляет функцию обработчика событий к элементу HTML.
Функция выполняется, когда левая, средняя или правая кнопка мыши освобождается, в то время как мышь находится над HTML-элементом:
Пример
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
hover()
Метод hover () выполняет две функции и представляет собой комбинацию методов MouseEnter () и MouseLeave ().
Первая функция выполняется, когда мышь переходит в HTML-элемент, а вторая функция выполняется, когда мышь покидает HTML-элемент:
Пример
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
Метод Focus () присоединяет функцию обработчика событий к полю формы HTML.
Функция выполняется, когда поле формы получает фокус:
Пример
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
blur()
Метод Blur () присоединяет функцию обработчика событий к полю формы HTML.
Функция выполняется, когда поле формы теряет фокус:
Пример
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
The on() Method
Метод On () присоединяет один или несколько обработчиков событий для выбранных элементов.
Прикрепите событие Click к элементу <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
Для полной справочник на события jQuery, пожалуйста, перейдите к нашей JQuery события справка.
