События в Javascript – Щелчок мыши - Наведение указателя

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

В JavaScript один обработчик может работать с несколькими объектами. Объект-события идентифицируется в функции-обработчике при помощи свойства target - оно указывает на объект, сгенерировавший событие. Здесь для нескольких полупрозрачных изображений (нескольких объектов) назначается одна функция-обработчик. При щелчке мышью на любом из изображений оно становиться полноценным.

Событие перемещение мыши представлено свойством onmousemove: с его помощью объект, над которым происходит перемещение (или объект события) передается обработчику. В функции-обработчике можно работать с координатами объекта при помощи свойств clientX, clientY; screenX, screenY или pageX, pageY. Здесь при перемещении мыши над картой мы увидим, как меняются координаты в зависимости от положения указателя.

Метод setTimeout может содержать два или три параметра. Первый параметр - это код или функция, которые необходимо выполнить через указанный промежуток времени. Время в миллисекундах - это второй параметр. Третьим параметром setTimeout может быть аргумент, который передается функции, указанной в качестве первого параметра метода. Здесь мы продолжим работать с тремя полупрозрачными изображениями: - каждое из них при щелчке становиться полноценным (см. выше - материал Свойство target). - с помощью метода setTimeout сделаем так, чтобы через 2 секунды картинка, на которой щелкнули мышью, снова стала полупрозрачной.

Событие наведение мыши представлено свойством onmouseover. Свойство onmouseover позволяет любой элемент веб-страницы (объект) передать функции-обработчику. Обработчик события наведения курсора мыши позволяет менять свойства объекта, который является источником события (т.е. свойства элемента страницы, на который навели курсор). Свойство onmouseout, наоборот сообщает о выходе указателя мыши за границы объекта. Здесь продолжается работа с тремя полупрозрачными изображениями и методом setTimeout (см. предыдущий урок). При помощи свойств onmouseover и onmouseout реализуем следующее: - любое из трех изображений становиться полноценным при наведении на него указателя мыши (свойство onmouseover); - картинка снова становиться размытой при выходе указателя мыши за ее границы (свойство onmouseout).