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

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

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.