Событие Hover
В предыдущей задачке нам пришлось использовать два события – наведение мыши и вывод мыши с объекта. Вообще, два эти события очень часто случаются в паре, например, вы встречали на сайтах реакцию кнопок меню – вы наводите на кнопку меню она меняется, уводите мышь с кнопки, кнопка возвращается в исходное состояние.
Такое парное событие и называется событие hover. Давайте исправим jQuery код в нашей задачке.
$('#price tr').hover(function( ){
$(this).addClass('trhov');
}, function(){
$(this).removeClass('trhov');
});
Обратите внимание, что событие hover содержит в себе две функции. Первая функция выполняется в момент наведения мыши, а вторая функция выполняется в момент вывода мыши с объекта. При этом функции прописываются через запятую.
Т.о. синтаксис этого события выглядит так:
$('объект').hover(function( ){
Действия при наведении мыши;
} , function(){
Действия при выводе мыши с объекта;
});
Событие Toggle
Еще одно парное событие в jQuery – это событие toggle. В этом событии описывают действия, которые должны наступить при первом клике по объекту и действие, которое должно наступить при повторном клике по объекту.
Задача: На страничке нашего сайта есть форма. Надо сделать ссылку, кликая по которой первый раз форма скрывается, а при повторном клике форма опять разворачивается.
Решение.
Сначала надо сделать ссылку, по которой будем кликать, т.е. перед формой добавить html код будущей ссылки:
<div id="form_link">Свернуть форму заказа</div>
В стилевой файл добавим оформление. Сделаем так, чтобы текст Свернуть форму действительно напоминал ссылку, т.е. оформим подчеркивание, немного отступим от самой формы, так же изменим курсор на указатель пальчика. Т.о. в стилевом файле дописываем следующий код:
#form_link{
margin-bottom: 10px;
text-decoration: underline;
cursor: pointer;
}
Вот, что должно получится:
Теперь к нашей ссылке добавим jQuery код:
$('#form_link').toggle(function(){
$('#my_form').fadeOut(1000);
$(this).text('Развернуть форму заказа');
},function(){
$('#my_form').fadeIn(1000);
$(this). ('Свернуть форму заказа');
});
Протестируйте! Форма прекрасно сворачивается и разворачивается.
В этом примере мы не только постарались спрятать и открыть форму методами fadeout() и fadeIn(), но и с помощью метода text() меняли текст нашей ссылки.
Обратите внимание, в методе описывается две функции, которые прописываются через запятую.
Т.о. синтаксис события выглядит так:
$('объект').toggle(function( ){
Действия, выполняемые при первом щелчке по объекту;
},function( ){
Действия, выполняемые после второго щелчка по объекту;
});
Объект событие
Я уже говорила, что браузер очень четко отслеживает события, происходящие в нем и фиксирует при этом информацию о событии. Чтобы было понятнее, представьте себе событие из жизни. Например, событие подъехал автобус к остановке. Какую информацию о этом событии можно получить? Номер автобуса, сколько людей в автобусе, марку автобуса, данные водителя, стоимость проезда и т.д. Т.е. любое событие несет в себе информацию.
Так же браузер фиксирует информацию о событии. Например, событие щелчек мыши. Какую информацию зафиксировал браузер? Координаты щелчка, какой объект находился под курсором в этот момент и т.д.
Т.о. событие превращается в объект, наделенный своими свойствами. Наша задача научится обращаться к свойствам объекта события.
Давайте пропишем сначала простенький код клика по картинке. На страничке нашего сайта есть блок div_img, в нем расположено четыре картинки. Сделаем так, чтобы при клике на любой картинке в этом блоке, выводилось сообщение, что произошел клик.
$('#div_img').click(function(){
alert('Произошел клик');
});
Теперь, если кликнуть на любой картинке, то выводится сообщение. Т.е. у нас происходит событие клик и это событие автоматически превращается в объект. Теперь из этого объекта события надо вытащить информацию, например в каком месте произошел клик.
Для этого, в наш код надо ввести переменную в функцию. Имя этой переменной можно придумать любое. Располагается эта переменная внутри круглых скобок function( ). Так и сделаем:
$('#div_img').click(function(object){
alert('Произошел клик');
});
Теперь обращаясь к переменной object мы можем получить информацию:
$('#div_img').click(function(object){
alert('Произошел клик. Координата по оси Х: ' + object.screenX);
});
Протестируйте работу кода. В результате клика, появляется окно с сообщением о том, что произошел клик и координата клика по оси Х. При этом свойство screenX показывает координату от края монитора, а не от края окна браузера.
В литературе часто используют имя переменной eventObject или просто e. А вообще, можно придумать любое имя переменной, у нас например просто object .
Т.о. в момент клика в переменную записывается информация о событии. Эта информация автоматически становится свойством объекта. Доступ к свойствам объекта записывается через точку так:
Объект.Свойство
Свойства объекта события:
screenX – координата Х от края монитора;
screenY – координата Y от края монитора;
pageX – координата Х от края окна браузера;
pageY – координата Y от края окна браузера;
altKey –была ли нажата клавиша alt , возвращается значение истина или ложь;
ctrlKey –была ли нажата клавиша ctrl, возвращается значение истина или ложь;
shiftKey –была ли нажата клавиша shift, возвращается значение истина или ложь;
target – возвращает тип объекта, отреагировавшего на клик. Попробуем это свойство. Исправим немного код:
$('#div_img').click(function(object){
alert('Произошел клик. На клик отреагировал объект: ' + object.target);
});
Вот результат выполнения кода:
В сообщение указано, что на клик отреагировал JavaScript объект типа Image. В свою очередь этот объект типа имеет свой набор свойств, которые мы можем вытащить. Для этого в коде через точку указывается то свойство, которое нас интересует. Например:
$('#div_img').click(function(object){
alert('Произошел клик. На клик отреагировал объект: ' + object.target.alt);
});
Теперь сообщение выводит все то, что написано в атрибуте alt тега img.
Вместо свойства alt можно указать id, width, height, src и т.д.