Initialization JavaScript code:

Main JavaScript code:

Show this JavaScript code
Click here two time (1)
Click here two time (2)
Down text 1
Down text 2

Note: full english description will be later.



Задача: По событию "onclick" на блоке A: первый раз - показываем блок B и позиционируем его напротив курсора; второй раз - позиционируем блок B, напротив блока A; третий раз - прячем блок B.

Данный пример очень похож на предыдущий. Поэтому здесь я остановлюсь только на основных отличиях этого скрипта. Попробуйте самостоятельно разобрать данный пример и понять, каким образом мы получаем и устанавливаем необходимые координаты. Хочу обратить ваше внимание, что обертка "elmWrapper" манипулирует как абсолютными, так и относительными координатами, поэтому будьте внимательны в будущем, при выборе для себя нужного метода.

Самый главный момент на который я хотел обратить здесь ваше внимание - это второй параметр, который передается в обработчик события. Как я уже упоминал во вступительной части, в каждый обработчик события передается два параметра:

  1. обертка event-object - evtWrapper
  2. специальный пользовательский объект предопределенный в момент подписки

Откуда же берется этот второй объект? - Он просто возвращается вам в момент подписки. Вы можете задать этому объекту любые свойства и потом использовать их. Вы также можете сколько угодно менять эти свойства в процессе работы скрипта. Этот объект будет существовать, пока существует данная подписка. Если вы вызываете обработчик не через подписку, а через функцию обратного вызова, то этот объект Вам надо буде просто передать как аргумент. Только имейте в виду, что при вызове обработчика через функцию обратного вызова все свойства этого объекта будут сбрасываются в исходное состояние, а при подписке все свойства сохраняются после изменения.

В данном примере мы в момент подписки этому пользовательскому объекту устанавливаем начальное свойство "n": par.n = 1;. А потом в момент возникновения события мы это свойство у данного объекта изменяем: par.n++;. Если Ваш браузер допускает запись скрипту в "statusBar" - вы там эти изменения можете увидеть.

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