События часто инициируются при взаимодействии пользователя с веб-страницей, например, когда нажимается ссылка или кнопка, вводится текст в поле <input> или текстовое поле, выполняется выбор в поле <select>, на клавиатуре нажимается клавиша, перемещается указатель мыши и т. д. В некоторых случаях сам браузер может инициировать такие события, как события загрузки (load) и выгрузки (unload) страницы.
jQuery расширяет базовые механизмы обработки событий, предлагая методы событий для большинства собственных событий браузера, некоторые из этих методов ready(), click(), keypress(), focus(), blur(), change() и т. д. Например, чтобы выполнить некоторый код JavaScript, когда DOM будет готов, вы можете использовать метод jQuery ready(), например:
<script>
$(document).ready(function(){
// Код должен быть выполнен
alert("Hello World!");
});
</script>$(document).ready() — это событие, которое используется для безопасного управления страницей с помощью jQuery. Код, включенный в это событие, будет запускаться только после того, как DOM страницы будет сформирован.
В общем, события можно разделить на четыре основные группы — события мыши, события клавиатуры, события формы и события документа/окна. Следующий раздел даст вам краткий обзор всех этих событий, а также связанных методов jQuery.
События Mouse
Событие мыши вызывается, когда пользователь щелкает некоторый элемент, перемещает указатель мыши и т. д. Вот некоторые часто используемые методы jQuery для обработки событий мыши.
jQuery-метод click()
jQuery-метод click() присоединяет функцию-обработчик события к выбранным элементам для события click. Присоединенная функция выполняется, когда пользователь нажимает на этот элемент. В следующем примере элементы <p> будут скрыты на странице при их нажатии.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>Ключевое слово this внутри функции-обработчика события jQuery является ссылкой на элемент, куда в данный момент доставляется событие.
jQuery-метод dblclick()
jQuery-метод dblclick() присоединяет функцию-обработчик событий к выбранным элементам для события dblclick. Присоединенная функция выполняется, когда пользователь дважды щелкает этот элемент. В следующем примере элементы <p> будут скрыты при двойном щелчке.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>jQuery-метод hover()
jQuery-метод hover() присоединяет одну или две функции обработчика событий к выбранным элементам, которые выполняются, когда указатель мыши наводится на элементы и покидает их. Первая функция выполняется, когда пользователь помещает указатель мыши над элементом, тогда как вторая функция выполняется, когда пользователь убирает указатель мыши с этого элемента.
В следующем примере будут выделены элементы <p> при наведении на них курсора.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>По сути, метод hover() является комбинацией методов mouseenter() и mouseleave().
jQuery-метод mouseenter()
jQuery-метод mouseenter() присоединяет функцию-обработчик событий к выбранным элементам, которая выполняется, когда курсор мыши помещается на элемент. Следующий пример добавит подсветку класса к элементу <p>, когда вы поместите на него курсор.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>jQuery-метод mouseleave()
jQuery-метод mouseleave() присоединяет функцию-обработчик событий к выбранным элементам, которая выполняется, когда мышь покидает область элемента. Следующий пример удалит выделение класса из элемента <p>, когда вы уберете с него курсор.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Подробнее см. Руководство по методам событий jQuery.
События Keyboard
Событие клавиатуры вызывается, когда пользователь нажимает или отпускает клавишу на клавиатуре. Вот некоторые часто используемые методы jQuery для обработки событий клавиатуры.
jQuery-метод keypress()
jQuery-метод keypress() присоединяет функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда браузер получает ввод с клавиатуры пользователем. В следующем примере будет отображаться сообщение, когда событие keypress() запускается и сколько раз оно запускается при нажатии клавиш на клавиатуре.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Событие keypress() аналогично событию keydown(), за исключением того, что клавиши-модификаторы и непечатаемые клавиши, такие как Shift, Esc, Backspace или Delete, клавиши со стрелками и т. д., запускают события keydown(), но не события keypress().
jQuery-метод keydown()
jQuery-метод keydown() присоединяет функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь впервые нажимает клавишу на клавиатуре. В следующем примере будет отображаться сообщение о срабатывании события нажатия клавиш и о том, сколько раз оно срабатывает при нажатии клавиш на клавиатуре.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>jQuery-метод keyup()
jQuery-метод keyup() присоединяет функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь отпускает клавишу на клавиатуре. В следующем примере будет отображаться сообщение, когда событие keyup() запускается и сколько раз оно запускается при нажатии и отпускании клавиш на клавиатуре.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>События клавиатуры могут быть прикреплены к любому элементу, но событие отправляется только тому элементу, который имеет фокус. Вот почему события клавиатуры обычно присоединяются к элементам управления формы, таким как поле <input> или <textarea>.
События Form
Событие формы вызывается, когда элемент управления формы получает или теряет фокус, или когда пользователь изменяет значение элемента управления формы, например, вводя текст в поле <input>, выбирает параметр в поле <select> и т. д. Вот некоторые часто используемые методы jQuery для обработки событий формы.
jQuery-метод change()
jQuery-метод change() присоединяет функцию-обработчик события к элементам <input>, <textarea> и <select>, которая выполняется при изменении их значения. В следующем примере будет отображаться предупреждающее сообщение при выборе любого параметра в раскрывающемся списке.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Для полей select, checkbox и radio событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для ввода текста событие вызывается после того, как элемент теряет фокус.
jQuery-метод focus()
jQuery-метод focus() присоединяет функцию-обработчик событий к выбранным элементам (обычно это элементы управления и ссылки), которая выполняется, когда он получает фокус. В следующем примере отобразится сообщение, когда текстовое поле <input> получит фокус.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>jQuery-метод blur()
jQuery-метод blur() присоединяет функцию-обработчик событий к элементам формы, таким как <input>, <textarea>, <select>, которая выполняется, когда элемент теряет фокус. В следующем примере будет отображаться сообщение, когда текстовое поле <input> теряет фокус.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>jQuery-метод submit()
jQuery-метод submit() присоединяет функцию-обработчик событий к элементу <form>, которая выполняется, когда пользователь пытается отправить форму. В следующем примере будет отображаться сообщение в зависимости от значения, введенного при попытке отправить форму.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Предотвращение отправки формы
event.preventDefault();
}
});
});
</script>Форма может быть отправлена либо нажатием кнопки «Отправить», либо нажатием клавиши «Ввод», когда определенные элементы формы имеют фокус.
События Document/Window
События также инициируются в ситуации, когда DOM страницы (Document Object Model) готова, или когда пользователь изменяет размер или прокручивает окно браузера и т. д. Вот некоторые часто используемые методы jQuery для обработки событий такого рода.
jQuery-метод ready()
jQuery-метод ready() определяет функцию, которая будет выполняться при полной загрузке DOM.
Следующий пример заменит текст абзацев, как только иерархия DOM будет полностью построена и готова к манипулированию.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>jQuery-метод resize()
jQuery-метод resize() присоединяет функцию-обработчик события к элементу окна, которая выполняется при изменении размера окна браузера.
В следующем примере будут отображаться текущая ширина и высота окна браузера при попытке изменить его размер.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>jQuery-метод scroll()
jQuery-метод scroll() присоединяет функцию-обработчик событий к окну или прокручиваемым фреймам и элементам, которые выполняются всякий раз, когда изменяется позиция прокрутки элемента.
В следующем примере будет отображаться сообщение при прокрутке окна браузера.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>
