После того как мы научились получать данные от пользователя, самое время разобраться с тем, как создавать обработчики событий. Перед началом опытов как обычно надо создать несколько элементов пользовательского интерфейса на HTML-странице. В моём примере HTML-код будет таким:
Затем нам надо получить ссылку на нужный элемент и создать обработчик события. Подробно расскажу на примере кнопки. Итак, в HTML-коде есть кнопка:
<button id="btnPress">Нажми меня</button><br>
Тогда в исходном коде на Паскале нам надо найти этот элемент (кнопку):
var btnPress : TJSHTMLInputElement;
…
btnPress := TJSHTMLInputElement(Document.getElementById('btnPress'));
Также нам надо создать процедуру - обработчик события. У нас она будет такой:
procedure ButtonPressClick(aEvent : TJSMouseEvent);
begin
Window.Alert('Ура! Работает!');
WriteLn('Координаты: (', aEvent.x, ', ', aEvent.y, ')');
end;
То есть при нажатии на кнопку мы выводим сообщение в окне, а также выводим координаты указателя мыши в момент нажатия на кнопку, но уже в консоль.
Теперь нам надо как-то связать с нашей кнопкой этот обработчик. Сделать это можно так:
btnPress.addEventListener('click', @ButtonPressClick);
В первом параметре мы передаём имя события, а во втором - адрес обработчика события (адрес нашей процедуры). Всё.
Основные виды событий:
- 'click' - происходит при щелчке кнопкой мыши (нажатие и отпускание кнопки)
- 'change' - происходит при изменении значения (но только после отпускания мыши или нажатии ENTER после ввода текста)
- 'keydown' - происходит при нажатии клавиши
- 'keyup' - происходит при отпускании клавиши
- 'submit' - происходит при отправке формы
- 'mousemove' - перемещение мыши
- 'mouseenter' - когда указатель появляется над элементом
- 'mouseleave' - когда указатель уходит с элемента
Ну и вот полный исходный код моего примера. Некоторые пояснения есть в комментариях. Но, думаю, вы и без этого во всём разберётесь:
Это были объявления и обработчики. А вот код основной программы:
Ну а в браузере всё это выглядеть будет примерно так:
На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.