Основы программирования на JavaScript | страница 15

var clickCount = 0;

function documentClick(){

document.getElementById('clicked').value = ++clickCount;

}

document.onclick = documentClick;

Вы щелкнули на этой странице раз.

Вы щелкнули на этой странице раз.

В предыдущей лекции оператор ++ был применен только после переменной, как в случае clickCount++. Однако в данном примере оператор ++ используется перед переменной. В первом примере clickCount++, единица добавляется к переменной clickCount после чтения ее значения. В случае ++clickCount единица добавляется к переменной clickCount перед чтением ее значения. Так как в этом примере переменной clickCount в начале присваивается значение 0, то единицу к ней необходимо добавлять до задания значения поля ввода, поэтому использована запись ++clickCount.

Предыдущий пример может показаться достаточно знакомым. Так же, как и раньше, определяется переменная и функция. Изменение состоит в том, что вместо вызова функции documentClick() код содержит указание, что функция должна выполняться всякий раз, когда пользователь щелкает на документе. document.onclick связывает функцию с событием документа onclick ("при щелчке").

Существует множество событий подобных onclick. Мы познакомимся с некоторыми из них, но наиболее распространенными являются: onclick, onload, onblur, onfocus, onchange, onmouseover, onmouseout и onmousemove. Функцию можно связать с событиями любого объекта, такого, как изображение или поле ввода, а не только документа. Например, события onmouseover и onmouseout используются обычно с изображениями для создания эффекта изменения.

Можно также заметить, что ссылка на поле ввода делается другим образом. Ранее говорилось, что для указания поля необходимо использовать document.forms.имяФормы.elements.имяПоляВвода. Хотя этот способ прекрасно работает, это не всегда необходимо. В данном примере поле ввода действует просто как счетчик. Оно не находится внутри формы, и нам это и не нужно. Поэтому мы задаем для поля некоторый ID (идентификатор): id="clicked". ID можно использовать для ссылки на любой объект на странице. ID должен быть уникальным на странице, поэтому если имеется 5 полей ввода с ID, то все ID должны быть различны, даже если они только имеют вид "input1"-->"input5".

Поскольку это поле ввода используется как счетчик, то нежелательно, чтобы пользователи щелкали на нем и изменяли его значение. Здесь на помощь приходит другое связывание,