Прототип - обработка событий

Управление событиями - одна из самых больших проблем для создания кросс-браузерных сценариев. В каждом браузере есть разные подходы к обработке нажатия клавиш.

Prototype Framework решает все проблемы совместимости между браузерами и избавляет вас от всех проблем, связанных с управлением событиями.

Prototype Framework предоставляет пространство имен Event , которое изобилует методами, которые принимают текущий объект события в качестве аргумента и с радостью производят запрашиваемую информацию во всех основных браузерах.

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

S.No.	Ключевая константа и описание
1.	KEY_BACKSPACE Представьте клавишу пробела назад.
2.	KEY_TAB Представляют собой клавишу табуляции.
3.	KEY_RETURN Представляют ключ возврата.
4.	KEY_ESC Представляют ключ esc.
5.	KEY_LEFT Представляют левую клавишу.
6.	KEY_UP Представляем ключ.
7.	KEY_RIGHT Представьте правильный ключ.
8.	KEY_DOWN Представляют собой клавишу вниз.
9.	KEY_DELETE Представляют ключ удаления.
10.	KEY_HOME Представляют домашний ключ.
11.	KEY_END Представляют конечный ключ.
12.	KEY_PAGEUP Представляют ключ страницы вверх.
13.	KEY_PAGEDOWN Представляют клавишу страницы вниз.

Как обрабатывать события

Прежде чем мы начнем, давайте посмотрим на пример использования метода события. В этом примере показано, как захватить элемент DOM, на котором произошло событие.

пример

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Вывод

Вот полный список всех методов, связанных с Event. Функции, которые вы, скорее всего, будете часто использовать, - это наблюдение , элемент и остановка .

Прототип методов событий

NOTE - Убедитесь, что у вас установлена как минимум версия 1.6 prototype.js.

S.No.	Метод и описание
1.	элемент() Возвращает элемент DOM, на котором произошло событие.
2.	продлить () Расширяет событие всеми методами, содержащимися в Event.Methods.
3.	findElement () Возвращает первый элемент DOM с заданным именем тега вверх от того, для которого произошло событие.
4.	isLeftClick () Определяет, было ли событие мыши, связанное с кнопкой, касалось «левой» (фактически основной) кнопки.
5.	наблюдать () Регистрирует обработчик событий в элементе DOM.
6.	указательX () Возвращает абсолютное горизонтальное положение для события мыши.
7.	указательY () Возвращает абсолютное вертикальное положение для события мыши.
8.	стоп() Останавливает распространение события и предотвращает запуск его действия по умолчанию.
9.	stopObserving () Отменяет регистрацию обработчика событий.
10.	unloadCache () Отменяет регистрацию всех обработчиков событий, зарегистрированных посредством наблюдения. Автоматически подключается для вас. Недоступно с версии 1.6.