- •2. Что такое события в JavaScript
- •2.1. Как связать событие и JavaScript
- •2.3. Основные события в JavaScript
- •2.4. События, о которых не было сказано
- •3. Return к функциям (функции и события)
- •4. Еще один пример использования функций и событий
- •5. События и его свойства (Event)
- •5.1. Передача объекта Event внутрь обработчика события
- •5.2. Всплывание события cancelBubble
- •5.3. Вызов стандартного обработчика
- •5.4. Практика работы с мышью: перетаскивание элементов
- •6. Функции (нюансы) Итак, события мы рассмотрели полностью, но в функциях существует множество нюансов, поэтому следующая тема будет посвящена именно им.
- •6.1. Знакомство с рекурсией.
- •Пример на рекурсию
- •Р екурсии или итерации?
- •6.2. Функция – это переменная. Несколько видов объявлений функций.
- •6.3. Функция внутри функции
- •6.4. Условная функция
- •7. Самостоятельное задание:
5. События и его свойства (Event)
В момент возникновения любого события иногда нужно прослеживать некоторые вещи, к примеру, кто вызвал это событие, в каком месте была нажата клавиша мыши, какая клавиша клавиатуры была нажата и т.д. За этим следит некий объект, который создается в момент возникновения события. Этот объект имеет имя Event. Внутри этого объекта есть несколько переменных, которые хранятся внутри объекта и чтобы обратиться к ним, нужно написать Event, затем точку, а потом написать имя переменной, которая хранит информацию о событии. Такие записи мы уже встречали, например, через точку мы обращались к свойствам стилей элемента.
В следующем примере на экран выводится некое изображение. Вы можете щелкнуть где-нибудь над ним клавишей мыши. В результате появится окошко сообщений, где будут показаны координаты той точки, где в этот момент находилась мышь.
Код скрипта:
<layer> <a href="#" onClick="alert('x: ' + event.x + ' y: ' + event.y); return false;"> <img src="davinci.jpg" width=209 height=264 border=0> </a> </layer>
Как видите, в тэг <a> мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши.
К тому же мы поместили все команды в тэг <layer>. Благодаря этому мы получаем в сообщении координаты относительно данного слоя, т.е. в нашем случае относительно самого изображения. В противном же случае мы получили бы координаты относительно окна браузера. (инструкция return false; используется здесь для того, чтобы браузер не обрабатывал далее данную ссылку)
Объект Event получил следующие свойства (их мы рассмотрим в следующих примерах), кстати, не все свойства одинаково отображаются во всех браузерах, поэтому в таблице собраны свойства для двух типов браузеров:
Описание/Свойство |
IE |
Остальные |
Целевой объект |
srcElement |
target |
Тип события |
type |
type |
Горизонтальное положение курсора внутри элемента |
offsetX |
offsetX, но не во всех работает |
Вертикальное положение курсора внутри элемента |
offsetY |
offsetY, но не во всех работает |
Горизонтальное положение курсора (в пикселах) относительно слоя. |
x |
x / layerX |
Вертикальное положение курсора (в пикселах) относительно слоя. |
y |
y / layerY |
Горизонтальное положение курсора (в пикселах) относительно окна браузера |
- |
pageX |
Вертикальное положение курсора (в пикселах) относительно окна браузера |
- |
pageY |
Горизонтальное положение курсора относительно верхнего левого угла клиентской области страницы |
clientX |
clientX |
Вертикальное положение курсора относительно верхнего левого угла клиентской области страницы |
clientY |
clientY |
Горизонтальное положение курсора (в пикселах) относительно экрана |
screenX |
screenX |
Вертикальное положение курсора (в пикселах) относительно экрана |
screenY |
screenY |
Определяет, какие кнопки мыши были нажаты в момент возникновения события
|
button |
button |
Код нажатой на клавиатуре клавиши в Unicode |
keyCode |
keyCode |
Признак состояния кнопки Shift в момент возникновения события: true - нажата, false - свободна |
shiftKey |
shiftKey |
Признак состояния кнопки Alt в момент возникновения события: true - нажата, false - свободна |
altKey |
altKey |
Признак состояния кнопки Ctrl в момент возникновения события: true - нажата, false - свободна |
ctrlKey |
ctrlKey |
Предыдущий элемент |
fromElement |
relatedTarget |
Следующий элемент |
toElement |
relatedTarget |
устанавливает признак "всплывания" события
|
cancelBubble |
cancelBubble |
Позволяет установить возвращаемое обработчиком события значение.
|
returnValue |
returnValue |
Лучше всего использовать свойства, которые и работают и там и там, но в большинстве случаев так и выходит, потому что другие свойства очень редко используются.
Теперь мы можем получать подробную информацию в тот момент, когда происходит событие. Понятно, что не все свойства будут активны, когда возникнет событие, например, код нажатой кнопки не будет в событии onLoad и событии onMouseOut. В общем, по сути это логично.