Использование атрибутов обработки событий

2 3 4 5 6 7 8

Способы обработки событий

Обработка событий

Для обработки событий в Web-странице можно использовать следующие способы:

· использование атрибутов обработки событий, определенных в спецификации HTML;

· использование функций – обработчиков события;

· использование блоков прослушивания событий.

Первый, самый распространенный способ обработки события – задание атрибута обработки в элементе Web-страницы.

Имена атрибутов обработки событий определены в спецификации HTML и образуются из имени события с добавлением префикса "on". Значением атрибута являются предложение или предложения языка сценариев, реализующие обработку события.

Пример 4.5.42. Простой пример обработки события с помощью атрибута HTML:

В документе HTML определен следующий элемент button:

Кнопка 1</button>

Тогда при щелчке мышью по кнопке будет выведено сообщение, заданное в функции alert:

Поскольку обычно обработка события реализуется несколькими предложениями, в качестве значения атрибута обычно указывается вызов функции, обрабатывающей данное событие.

Пример 4.5.43. Обработка события в функции:

Следующий фрагмент документа HTML создает форму, элементами которой являются два текстовых поля с надписью, а также кнопки с надписями "Старт" и "Стоп":

<form>

<table>

<tr>

<td><label for="startField">Старт (время):</label></td>

<td><input type="text" id="startField"

readonly="readonly" size="8" maxlength="8"/></td>

<td><input type="button" id="startButton" value="Старт"

onclick="getCurrentTime('startField')"/></td>

</tr>

<tr>

<td><label for="stopField">Стоп (время):</label></td>

<td><input type="text" id="stopField"

readonly="readonly" size="8" maxlength="8"/></td>

<td><input type="button" id="stopButton" value="Стоп"

onclick="getCurrentTime('stopField')"/></td>

</tr>

</table>

</form>

Функция getCurrentTime(id-текстового-поля) возвращает в текстовое поле с заданным значением атрибута id текущее время в виде часы: минуты: секунды:

function getCurrentTime(fieldId)

{

// Получение текущей даты и времени

currentDateTime = new Date();

// Вывод текущего времени

document.getElementById(fieldId).value =

timeValue(currentDateTime.getHours()) + ":" +

timeValue(currentDateTime.getMinutes()) + ":" +

timeValue(currentDateTime.getSeconds());

}

Вспомогательная функция timeValue(время) добавляет впереди значения времени цифру 0, если значение времени состоит из одной цифры:

function timeValue(time)

{

// Если длина значения времени равна 1

if(time.toString().length == 1)

// Возврат значения с 0 впереди

return "0" + time;

// Возврат не измененного значения

return time;

}

Пример вывода фрагмента HTML после нажатия кнопок Старт и Стоп:

4.5.9.2.1.2. Использование функций – обработчиков события

Второй способ – прямое объявление функции, обрабатывающей событие заданного типа в документе или элементе документа (эта функция называется обработчиком события – event handler). Объявление функции-обработчика имеет следующий вид:

document. элемент-документа. on имя-события = имя-функции;

Если элемент-документа опущен, то обработка события будет выполняться для всех элементов в теле документа.

Пример 4.5.44. Использование функции-обработчика:

1. Функция с именем b1Event для обработки события щелчка мыши по элементу со значением атрибута id, равным "b1", объявляется следующим образом:

function b1Handle()

{

document.getElementById("b1").onclick = b1Event;

}

В этом случае атрибут onclick в элементе button задавать не надо, однако приведенное выше предложение JavaScript должно быть выполнено до обработки Web-браузером элемента, для которого задана обработка события, т.е. при загрузке Web-страницы (событии load). Обычно в этом случае вызов выполнения таких предложений задается в атрибуте onload элемента body:

Функция с именем b1Event и кнопка задаются следующим образом:

function b1Event()

{

alert('Нажата кнопка 1')

}

...

<button id="b1">Кнопка 1</button>

Вывод Web-страницы будет в этом случае такой же, как в примере 4.5.42.

2. Зададим обработку события щелчка мыши для всех элементов в теле документа:

document.onclick = clickEvent;

После этого предложения можно задать функцию-обработчик для события click:

function clickEvent()