Примеры описания событий средствами JavaScript | Все что вы хотели знать о хостинге и сайтостроении

Примеры описания событий средствами JavaScript


Рубрика: JavaScript

Для начала следует определиться, что же понимается в JavaScript под событием. На самом деле тут нет никаких сложностей и значение слова интуитивно понятно даже без углубленного изучения. Событие – это любая манипуляция пользователя системы или программы-браузера. Примером события, в частности, служит переход по ссылке, отображенной в строке браузера. К событиям, генерируемым пользователем, относится работа с мышью (клики или протаскивание) и внесение в форму изменений. Браузер совершает события, когда заканчивает загрузку файла, выводит сообщение об ошибке или закрывает страницу.

Примеры описания событий средствами JavaScript

Для каждого события существует наименование-идентификатор, а названия обработчика события составляется добавлением к этому наименованию приставки on. Пример:

  • Событие: щелчок мышью
  • Наименование-идентификатор: click
  • Обработчик события: onClick

JavaScript позволяет реагировать на большинство вероятных событий.

Чтобы рассмотреть примеры работы с событиями, необходим браузер, поддерживающий JavaScript. Например, Firefox 1.0 (и выше), Opera 3.0 (и выше), IE 4.0 (и выше).

Рассмотрим несколько примеров

Наведение и отведение курсора

Для адекватного реагирования на пользовательские события обработчики должны грамотно преобразовывать их для браузера. Смоделируем ситуацию, когда форма содержит 2 кнопки: Сброс и Готово. При наведении на каждую из них в строке состояния отображается пояснительная надпись. Строка состояния хранит свое содержимое в переменной window.status, значение этой переменной можно изменять операцией присваивания: имя_переменной = ‘значение’;

В рассматриваемом примере строка состояния должна отображать подсказку к значению кнопки, когда курсор наведен на кнопку, и быть пустой, когда курсор не на кнопке. Главная задача — определить, где в данный момент расположен курсор: на кнопке (и на какой) или нет.

  • Событие: наведение курсора [отведение курсора]
  • Наименование: mouseover [mouseout]
  • Обработчик: onmouseover [onmouseout]

Исходя из того, что обработчики должны выполнить значение соответствующих тегов атрибутов, получается, что определение кнопок в рассматриваемом примере выглядит следующим образом:

<input type=»submit value=»Готово» onmouseover=»window.status=’Щелкните для отправки данных'» onmouseout=»window.status=»» />

<input type=»reset» value=»Сброс» onmouseover=»window.status=’Щелкните для удаления введенного'» onmouseout=»window.status=»» />

Т.е., при наведении курсора на кнопку или отведении с кнопки обработчик данного события заглядывает в значение соответствующего ему атрибута и выполняет указанное там действие (присваивает строке состояния определенную запись).

Вызов справочного окна щелчком мыши

Примеры описания событий средствами JavaScript

Окно справки, как правило, имеет небольшие размеры, не содержит заголовка и панели инструментов. Средствами html справиться с такой задачей не представляется возможным. На выручку придет JavaScript. Вот как будет выглядеть JavaScript-код для создания окна документа help.html размером 300х200, не содержащего панель инструментов:

helpWindow = window.open(«help.html», «», «toolbar=0,width=300,height=200»);

helpWindow – переменная, которая создается для работы с окном. Позволяет эффективно работать с каждым окном, когда имеются его копии или одноименные окна в разных папках. «Окно» присваивается переменной, а той, в свою очередь, уже можно задавать любое имя. Таки образом получается избежать путаницы в кодах.

Window.open – функция, выполняющая открытие окна. В скобках содержатся параметры функции:

  • Help.html – открываемая страница
  • “ ” – название окна. В рассматриваемом случае – это пустая строка
  • «toolbar=0,width=300,height=200» – этот параметр сообщает функции размеры открываемого окна и то, что оно не содержит панель инструментов

При пользовательском событии «щелчок мыши для вызова справки» обработчик должен выполнить описанный выше код. Но строка слишком объемная, чтобы присвоить её в качестве значения для некоторого атрибута. Результат получится тяжелым и неудобным. Можно красиво выйти из ситуации. Создать пользовательскую функцию, которая в теле программы будет реализовывать данный код:

<script type=»text/javascript»>

function help()

{

helpWindow = window.open(«help.html», «», «toolbar=0,width=300,height=200»);

}

</script>

Следующая проблема состоит в том, что использование ссылки подразумевает переход на новую страницу, а в рассматриваемом случае вместо перехода должен быть выполнен JavaScript-код (конкретнее, созданная функция help()). Проблема решается прописыванием в теле программы строки:

<a href=»javascript:help()»>Щелкните на ссылке для получения помощи</a>

Вероятно, при первом знакомстве с событиями JavaScript они кажутся запутанными и малопонятными. Но уже при рассмотрении нескольких наглядных примеров ситуация проясняется, появляется интерес к дальнейшему изучению, и в самые сжатые сроки оказывается, что в реальности все предельно просто и удобно.

Если вам понравилась статья или была полезна, поделитесь ею с друзьями: