§17. Доступ к элементам через атрибут id. События.
Что мы уже знаем.
Для тех, кто изучает учебник не по порядку, приведём сведения в виде тезисов, которые были уже изучены в 9 параграфе.
Для того, что бы заставить элемент реагировать на событие, необходимо атрибуту onclick присвоить строку с JavaScript кодом, выполнение которой и будет реакцией на событие.
Доступ к элементам html документа осуществляется через значение атрибута id, которое является именем объекта созданного автоматически.
Всё содержимое элемента html документа находится в свойстве innerHTML, которое может быть динамически изменено.
Динамическое изменение свойств css элементов html документа осуществляется через свойство style.
Для вызова JavaScript кода может быть использована кнопка, созданная с помощью тэга input, атрибуту type которого присваивается значение button.
Поле для ввода.
Для дальнейших наших примеров и экспериментов понадобятся знания по созданию и использованию поля для ввода. Создаётся оно тэгом input так же как и кнопа, только атрибуту type необходимо присвоить значение text. Так же необходимо сказать, что всё, что содержится в этом поле, содержится и в атрибуте value. Пример:
<body>
<input id = "text" type = "text" value = "Привет всем!">
</body>
Атрибуты тэга как свойства объекта id.
В 9 параграфе было сказано, что если у тэга есть атрибут id, то в коде JavaScript программы автоматически появляется объект с таким же именем, как значение этого атрибута. В дополнение к этому необходимо сказать, что у такого объекта есть свойства, с такими же именами, как и атрибуты данного тэга. В свою очередь через эти свойства можно менять значения атрибутов. Причём изменив свойство в коде программы, это изменение автоматически отображается в html документе.
Для примера изменим содержимое поля для ввода из предыдущего примера уже в JavaScript коде:
text.value = 'Здравствуйте!';
Примечание: есть атрибуты некоторых элементов, к которым вышесказанное не относится. Для доступа к ним существуют определённые методы, некоторые из которых будут рассмотрены в соответствующих разделах следующих параграфов.
События.
Как мы уже знаем, у большинства элементов есть атрибут onclick, который содержит в себе реакцию на событие нажатие кнопки мыши. Так же существует атрибут onkeyup, который содержит в себе реакцию на нажатие кнопки клавиатуры. Далее пример, в котором после нажатия кнопки, выходит сообщение с введённым символом:
<body>
<input id = "text" type = "text" value = "Привет всем!" onkeyup = "text_onkeyup()">
<script>
function text_onkeyup()
{
alert(text.value[text.value.length-1]);
}
</script>
Существуют и другие события, которым соответствуют атрибуты с другими именами. Далее в таблице представлены те, которыми мы уже можем пользоваться на данном этапе:
Атрибут обработчик | Описание |
События мыши. | |
onclick | Нажата и отпущена клавиша мыши |
ondblclick | Двойной щелчок мыши |
onmousedouwn | Нажата кнопка мыши |
onmousemove | Указатель мыши переместился |
onmouseout | Указатель мыши вышел за пределы элемента |
onmouseover | Указатель мыши находится на элементе |
onmouseup | Отпущена кнопка мыши |
События клавиатуры. | |
onkeydown | Клавиша нажата. |
onkeypress | Клавиша нажата и отпущена |
onkeyup | Клавиша отпущена |
Другие события. | |
onresize | Изменение размеров окна |
onblur | Элемент теряет фокус |
onload | Завершена загрузка документа (рисунка). Актуален для элементов body, frameset (img). |
Здесь стоит отметить, что данные атрибуты, как и все остальные, в коде программы доступны как свойства. Поэтому для того, что бы назначить обработчик события можно этим свойствам присвоить уже готовую функцию. Обратите внимание на тот нюанс, что эти свойства на самом деле являются методами обработчиками. Поэтому присвоение им строки с кодом не даст желаемого результата. Присваивать необходимо уже определённую функцию. Пример:
text.onkeyup = text_onkeyup();
Так же можете присвоить функцию, созданную непосредственно при присвоении:
text.onkeyup = function()
{
alert(text.value[text.value.length-1]);
}
Примечание: способ установки обработчика события в коде программы является предпочтительней. Т.к. в таком случае JavaScript код отделяется от html кода. Такой подход называется ненавязчивым JavaScript. Это тоже самое, когда свойства css элементов стараются вынести в отдельную таблицу стилей. Плюсом ко всему, стоит сказать, что есть возможности обработки html документа без использования атрибута id и других «намёков» на JavaScript.
Объект события.
Когда вызывается функция обработчик, ей всегда в качестве аргумента передаётся объект события, который содержит в себе информацию о событии. Например, для того, что бы узнать какая клавиша была нажата, необходимо просмотреть свойство keyСode этого объекта события. Далее в примере после нажатия любой клавиши, её код будет выводиться в сообщении:
<body>
<input id = "text" type = "text" value = "Привет всем!"><br>
<span id = "kc"></span>
<script>
text.onkeyup = function(e)
{
kc.innerHTML = 'Была нажата клавиша с кодом ' + e.keyCode;
}
</script>
</body>
Свойства объекта события.
При возникновении различных событий, в качестве аргумента передаются объекты события с различными свойствами. Для того, что бы узнать все существующие свойства конкретного объекта события можно вывести их в окно браузера:
text.onkeyup = function(e)
{
for (prop in e)
{
document.write(prop,' - ',typeof e[prop],' = ',e[prop],'<br>');
}
}
Как видно из результата, свойств объекта события достаточно много. О том, для чего они нужны, можно найти в Интернете. Здесь в учебнике приведу только те, которые вам понадобятся для решения предложенных в конце учебника задач.
Свойство | К какому событию относится | Описание |
clientX | Все события связанные с мышью. | Координаты точки относительно окна браузера, в которой находился курсор мыши в момент события. |
clientY | ||
button | Номер кнопки. 0 – левая кнопка, 2 – правая кнопка. | |
сtrKey | Все события мыши и клавиатуры. | Была ли нажата клавиша ctr, shif или alt соответственно. |
shiftKey | ||
altKey | ||
keyCode | onkeydown | Код нажатой клавиши. |
onkeyup | ||
charCode | onkeypress | Код символа нажатой клавиши |
Примечание: как видно из таблицы, отличие события onkeypress от onkeyup и onkeydown заключается в том, что с его помощью мы можем получить введённый символ, а с помощью onkeyup и onkeydown - нажатую клавишу.
Установка курсора в нужное положение.
Для выполнения одной из задач вам понадобится умение устанавливать курсор в нужное положение. Для этого существует метод setCursorPosition(i_1,i_2). Этот метод создаёт выделение текста с позиции i_1 до позиции i_2. Если i_1 равно i_2, то просто устанавливается курсор в указанную позицию. Так же вам понадобится метод selectionStart, который возвращает текущую позицию курсора.
Задачи.
1. Создать поле для ввода. Добавив обработчик события onkeyup, контролировать ввод только цифр.
2. Создать поле для ввода и контролировать ввод сотового телефона в следующем формате: +7-XXX-XXX-XX-XX.
3. Создать на всё окно браузера тег canvas. По щелчку мыши рисовать геометрические фигуры в месте, где был произведён щелчок.
4. Переделать 3 задачу 10 параграфа так, что бы предмет перемещался при нажатии на кнопки клавиатуры.
5. Используя объект char получившийся при решении 4 задачи 10 параграфа вывести текст набранный с клавиатуры.
6. Дополнить 2 задачу 11 параграфа так, что бы при щелчке мыши по рисунку выводилась точка и сообщение о том, находится ли точка в закрашенной области.