События часто инициируются взаимодействием пользователя с веб-страницей, например, когда нажимается ссылка или кнопка, текст вводится в поле ввода или текстовое поле, выбор выполняется в поле выбора, клавиша нажимается на клавиатуре, мышь перемещает указатель и т.д. В некоторых случаях сам браузер может инициировать такие события, как события загрузки и выгрузки страницы.
jQuery расширяет базовые механизмы обработки событий JavaScript, предлагая методы для большинства собственных событий браузера, некоторые из этих методов: ready(), click(), keypress(), focus(), blur(), change() и т. д. Например, чтобы выполнить некоторый код JavaScript, когда DOM готов, вы можете использовать метод jQuery ready():
<script type="text/javascript">
$(document).ready(function(){
// Код для выполнения
alert("Hello World!");
});
</script>
В общем, события можно разделить на четыре основные группы - события мыши, события клавиатуры, события форм и события документа/окна. Следующий раздел даст вам краткий обзор всех этих событий, а также связанных с ними методов jQuery.
События мыши
Событие мыши вызывается, когда пользователь щелкает некоторый элемент, перемещает указатель мыши и т.д. Вот некоторые часто используемые методы jQuery для обработки событий мыши.
Метод клика click()
Метод jQuery click() задает функцию обработчика событий к выбранным элементам для события «click». Заданная функция выполняется, когда пользователь нажимает на этот элемент. В следующем примере элементы <p> будут скрыты на странице при их нажатии.
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
Метод двойного клика dblclick()
Метод jQuery dblclick() задает функцию-обработчик событий к выбранным элементам для события «dblclick» (двойной клик). Присоединенная функция выполняется, когда пользователь дважды щелкает этот элемент. В следующем примере элементы <p> будут скрыты при двойном щелчке.
<script type="text/javascript">
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
Метод наведения мыши hover()
Метод jQuery hover() задает одну или две функции обработчика событий к выбранным элементам, которые выполняются, когда указатель мыши входит в зону элемента и покидает ее. Первая функция выполняется, когда пользователь помещает указатель мыши над элементом, тогда как вторая функция выполняется, когда пользователь уводит указатель мыши из этого элемента.
В следующем примере элементы <p> будут выделены при наведении на него курсора, а выделение будет удалено при удалении курсора.
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
Метод mouseenter()
Метод jQuery mouseenter() задает функцию-обработчик событий к выбранным элементам, которая выполняется, когда мышь входит в зону элемента. В следующем примере будет добавлено выделение к элементу <p> при наведении на него курсора.
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>
Метод mouseleave()
Метод jQuery mouseleave() задает функцию-обработчик событий к выбранным элементам, которая выполняется, когда мышь покидает элемент. Следующий пример удалит выделение класса из элемента <p> при удалении с него курсора.
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
События клавиатуры
Событие клавиатуры запускается, когда пользователь нажимает или отпускает клавишу на клавиатуре. Вот некоторые часто используемые методы jQuery для обработки событий клавиатуры.
Метод нажатия клавиши keypress()
Метод jQuery keypress() задает функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда браузер получает ввод с клавиатуры от пользователя. В следующем примере отобразится сообщение, когда событие kypress запускается и сколько раз оно запускается при нажатии клавиши на клавиатуре.
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Метод нажатия клавиши keydown()
Метод jQuery keydown() задает функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь впервые нажимает клавишу на клавиатуре. В следующем примере будет отображаться сообщение о срабатывании события нажатия клавиш и о том, сколько раз оно срабатывает при нажатии клавиши на клавиатуре.
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Метод keyup()
Метод jQuery keyup() задает функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь отпускает клавишу на клавиатуре. В следующем примере будет отображаться сообщение, когда событие keyup вызывается и сколько раз оно запускается при нажатии и отпускании клавиши на клавиатуре.
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
События формы
Событие формы вызывается, когда элемент управления формы получает или теряет фокус, или когда пользователь изменяет значение элемента управления формы, например, вводя текст в поле ввода текста, выбирает любой параметр в поле выбора и т.д. Вот некоторые часто используемые методы jQuery для обработки событий формы.
Метод изменения состояния change()
Метод jQuery change() задает функцию-обработчик события к элементам <input>, <textarea> и <select>, которая выполняется при изменении его значения. В следующем примере будет отображаться предупреждающее сообщение при выборе любого параметра в раскрывающемся списке.
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
Метод получения фокуса focus()
Метод jQuery focus() задает функцию-обработчик события к выбранным элементам (обычно это элементы управления и ссылки), которая выполняется, когда он получает фокус. В следующем примере отобразится сообщение, когда текстовый ввод получит фокус.
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
Метод размытия blur()
Метод jQuery blur() задает функцию-обработчик событий к элементам формы, таким как <input>, <textarea>, <select>, которая выполняется, когда тот теряет фокус. В следующем примере будет отображаться сообщение, когда поле ввода текста теряет фокус.
<script type="text/javascript">
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
Метод отправки данных формы submit()
Метод jQuery submit() задает функцию-обработчик событий к элементам <form>, которая выполняется, когда пользователь пытается отправить форму. В следующем примере будет отображаться сообщение в зависимости от значения, введенного при попытке отправить форму.
<script type="text/javascript">
$(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">Ошибка!</p>').show().fadeOut(1000);
// Запрещаем отправку данных формы
event.preventDefault();
}
});
});
</script>
События документа/окна
События также инициируются в ситуации, когда DOM страницы (Document Object Model) готова, или когда пользователь изменяет размер или прокручивает окно браузера и т.д. Вот некоторые часто используемые методы jQuery для обработки таких событий.
Метод ready()
Метод jQuery ready() определяет функцию, которая будет выполняться при полной загрузке DOM.
Следующий пример заменит текст абзацев, как только иерархия DOM будет полностью построена и готова к манипулированию.
<script type="text/javascript">
$(document).ready(function(){
$("p").text("DOM загружен!");
});
</script>
Метод изменения размера resize()
Метод jQuery resize() задает функцию-обработчик события к элементу окна, которая выполняется при изменении размера окна браузера.
В следующем примере будут отображаться текущая ширина и высота окна браузера при попытке изменить его размер, перемещая его углы.
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Ширина окна: " + $(window).width() + ", " + "Высота окна: " + $(window).height());
});
});
});
</script>
Метод прокрутки scroll()
Метод jQuery scroll() задает функцию-обработчик события к окну или прокручиваемым элементам iframe.
В следующем примере будет отображаться сообщение при прокрутке окна браузера.
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>
Оставить комментарий