Учебники

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

Сентябрь 15, 2018

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

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

Представьте страницу вниз ключом.

Key_Backspace

Представляют клавишу пробела назад.

Key_Tab

Представлять вкладку ключ.

Key_Return

Представляете ключ возврата.

KEY_ESC

Представляют клавишу Esc.

Key_Left

Представляете левый ключ.

Key_Up

Представляете до ключа.

Key_Right

Представляете правильный ключ.

KEY_DOWN

Представляете вниз ключ.

Key_Delete

Представляете ключ удаления.

Key_Home

Представляют домашний ключ.

Key_End

Представляют конечный ключ.

Key_PageUp

Представлять страницу вверх ключом.

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 . Скорее всего, вы будете часто использовать функции наблюдения , элемента и остановки .

Методы событий прототипа

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть хотя бы версия 1.6 файла prototype.js.

Возвращает элемент DOM, для которого произошло событие.

Расширяет событие всеми методами, содержащимися в Event.Methods.

Возвращает первый элемент DOM с заданным именем тега, вверх от того, на котором произошло событие.

Определяет, происходило ли событие мыши, связанное с кнопкой, относительно «левой» (основной, на самом деле) кнопки.

Регистрирует обработчик событий в элементе DOM.

Возвращает абсолютную горизонтальную позицию для события мыши.

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

Останавливает распространение события и предотвращает его действие по умолчанию в конце концов.

Отменяет регистрацию обработчика событий.

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

35
Share: