Учебники

jQuery — обработка событий

Ноябрь 20, 2018

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

Ниже приведены примеры событий —

  • Щелчок мыши
  • Загрузка веб-страницы
  • Взяв мышь над элементом
  • Отправка формы HTML
  • Нажатие клавиши на клавиатуре и т. Д.

Когда эти события запускаются, вы можете использовать пользовательскую функцию, чтобы делать практически все, что вы хотите с этим событием. Эти пользовательские функции вызывают обработчики событий.

Обязательные обработчики событий

Используя модель событий jQuery, мы можем установить обработчики событий для элементов DOM с помощью метода bind () следующим образом:

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Этот код заставит элемент подразделения реагировать на событие click; когда пользователь щелкает внутри этого подразделения после этого, будет отображаться предупреждение.

Это даст следующий результат —

Полный синтаксис команды bind () следующий: 

selector .bind( eventType[, eventData], handler)

Ниже приводится описание параметров —

  • eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

  • eventData — это необязательный параметр, представляющий собой карту данных, которые будут переданы в обработчик событий.

  • handler — функция, которая выполняется каждый раз, когда событие инициируется.

eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

eventData — это необязательный параметр, представляющий собой карту данных, которые будут переданы в обработчик событий.

handler — функция, которая выполняется каждый раз, когда событие инициируется.

Удаление обработчиков событий

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

jQuery предоставляет команду unbind () для удаления существующего обработчика событий. Синтаксис unbind () выглядит следующим образом: 

selector .unbind(eventType, handler)

or 

selector .unbind(eventType)

Ниже приводится описание параметров —

  • eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

  • handler — если указан, определяет конкретного слушателя, которого нужно удалить.

eventType — Строка, содержащая тип события JavaScript, например, click или submit. Обратитесь к следующему разделу для получения полного списка типов событий.

handler — если указан, определяет конкретного слушателя, которого нужно удалить.

Типы событий

Sr.No. Тип события и описание
1

пятно

Происходит, когда элемент теряет фокус.

2

менять

Происходит, когда элемент изменяется.

3

щелчок

Происходит при щелчке мышью.

4

DblClick

Происходит при двойном щелчке мыши.

5

ошибка

Происходит при ошибке загрузки или выгрузки и т. Д.

6

фокус

Происходит, когда элемент получает фокус.

7

KeyDown

Происходит при нажатии клавиши.

8

нажатие клавиши

Происходит при нажатии и отпускании клавиши.

9

KeyUp

Происходит, когда ключ отпущен.

10

нагрузка

Происходит, когда документ загружен.

11

MouseDown

Происходит при нажатии кнопки мыши.

12

MouseEnter

Происходит, когда мышь входит в область элемента.

13

MouseLeave

Происходит, когда мышь покидает область элемента.

14

MouseMove

Происходит при перемещении указателя мыши.

15

MouseOut

Происходит, когда указатель мыши выходит за пределы элемента.

16

Mouseover

Происходит, когда указатель мыши перемещается над элементом.

17

MouseUp

Происходит при отпускании кнопки мыши.

18

изменить размер

Происходит при изменении размера окна.

19

свиток

Происходит, когда окно прокручивается.

20

Выбрать

Происходит при выделении текста.

21

Отправить

Происходит при отправке формы.

22

разгружать

Происходит, когда документы выгружены.

пятно

Происходит, когда элемент теряет фокус.

менять

Происходит, когда элемент изменяется.

щелчок

Происходит при щелчке мышью.

DblClick

Происходит при двойном щелчке мыши.

ошибка

Происходит при ошибке загрузки или выгрузки и т. Д.

фокус

Происходит, когда элемент получает фокус.

KeyDown

Происходит при нажатии клавиши.

нажатие клавиши

Происходит при нажатии и отпускании клавиши.

KeyUp

Происходит, когда ключ отпущен.

нагрузка

Происходит, когда документ загружен.

MouseDown

Происходит при нажатии кнопки мыши.

MouseEnter

Происходит, когда мышь входит в область элемента.

MouseLeave

Происходит, когда мышь покидает область элемента.

MouseMove

Происходит при перемещении указателя мыши.

MouseOut

Происходит, когда указатель мыши выходит за пределы элемента.

Mouseover

Происходит, когда указатель мыши перемещается над элементом.

MouseUp

Происходит при отпускании кнопки мыши.

изменить размер

Происходит при изменении размера окна.

свиток

Происходит, когда окно прокручивается.

Выбрать

Происходит при выделении текста.

Отправить

Происходит при отправке формы.

разгружать

Происходит, когда документы выгружены.

Объект события

Функция обратного вызова принимает один параметр; когда вызывается обработчик, через него передается объект события JavaScript.

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

Атрибуты события

Sr.No. Описание недвижимости
1

клавишу Alt

Установите в значение true, если клавиша Alt была нажата при запуске события, в противном случае — значение false. Клавиша Alt помечена как Option на большинстве клавиатур Mac.

2

ctrlKey

Установите в значение true, если клавиша Ctrl была нажата, когда событие было инициировано, в противном случае — значение false.

3

данные

Значение, если оно есть, передается в качестве второго параметра команде bind () при установке обработчика.

4

ключевой код

Для событий keyup и keydown это возвращает нажатую клавишу.

5

metaKey

Установите в значение true, если мета-клавиша была нажата при запуске события, в противном случае — значение false. Мета-клавиша — это клавиша Ctrl на ПК и клавиша Command на Mac.

6

pageX

Для событий мыши указывает горизонтальную координату события относительно источника страницы.

7

Пейджи

Для событий мыши указывает вертикальную координату события относительно источника страницы.

8

relatedTarget

Для некоторых событий мыши, идентифицирует элемент, который курсор оставил или ввел, когда событие было запущено.

9

ScreenX

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

10

Screeny

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

11

shiftKey

Установите в значение true, если клавиша Shift была нажата при запуске события, в противном случае — значение false.

12

цель

Определяет элемент, для которого было инициировано событие.

13

TIMESTAMP

Отметка времени (в миллисекундах), когда событие было создано.

14

тип

Для всех событий указывает тип события, которое было инициировано (например, нажмите).

15

который

Для событий клавиатуры указывает числовой код клавиши, вызвавшей событие, а для событий мыши — какая кнопка была нажата (1 для левой стороны, 2 для средней, 3 для правой).

клавишу Alt

Установите в значение true, если клавиша Alt была нажата при запуске события, в противном случае — значение false. Клавиша Alt помечена как Option на большинстве клавиатур Mac.

ctrlKey

Установите в значение true, если клавиша Ctrl была нажата, когда событие было инициировано, в противном случае — значение false.

данные

Значение, если оно есть, передается в качестве второго параметра команде bind () при установке обработчика.

ключевой код

Для событий keyup и keydown это возвращает нажатую клавишу.

metaKey

Установите в значение true, если мета-клавиша была нажата при запуске события, в противном случае — значение false. Мета-клавиша — это клавиша Ctrl на ПК и клавиша Command на Mac.

pageX

Для событий мыши указывает горизонтальную координату события относительно источника страницы.

Пейджи

Для событий мыши указывает вертикальную координату события относительно источника страницы.

relatedTarget

Для некоторых событий мыши, идентифицирует элемент, который курсор оставил или ввел, когда событие было запущено.

ScreenX

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

Screeny

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

shiftKey

Установите в значение true, если клавиша Shift была нажата при запуске события, в противном случае — значение false.

цель

Определяет элемент, для которого было инициировано событие.

TIMESTAMP

Отметка времени (в миллисекундах), когда событие было создано.

тип

Для всех событий указывает тип события, которое было инициировано (например, нажмите).

который

Для событий клавиатуры указывает числовой код клавиши, вызвавшей событие, а для событий мыши — какая кнопка была нажата (1 для левой стороны, 2 для средней, 3 для правой).

Live Demo 

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Это даст следующий результат —

Методы мероприятия

Существует список методов, которые могут быть вызваны для объекта Event —

Sr.No. Метод и описание
1 preventDefault ()

Запрещает браузеру выполнять действие по умолчанию.

2 isDefaultPrevented ()

Возвращает, был ли когда-либо вызван event.preventDefault () для этого объекта события.

3 stopPropagation ()

Останавливает передачу события родительским элементам, предотвращая уведомление любых родительских обработчиков о событии.

4 isPropagationStopped ()

Возвращает, был ли когда-либо вызван event.stopPropagation () для этого объекта события.

5 stopImmediatePropagation ()

Останавливает выполнение остальных обработчиков.

6 isImmediatePropagationStopped ()

Возвращает, был ли когда-либо вызван event.stopImmediatePropagation () для этого объекта события.

Запрещает браузеру выполнять действие по умолчанию.

Возвращает, был ли когда-либо вызван event.preventDefault () для этого объекта события.

Останавливает передачу события родительским элементам, предотвращая уведомление любых родительских обработчиков о событии.

Возвращает, был ли когда-либо вызван event.stopPropagation () для этого объекта события.

Останавливает выполнение остальных обработчиков.

Возвращает, был ли когда-либо вызван event.stopImmediatePropagation () для этого объекта события.

Методы управления событиями

В следующей таблице перечислены важные методы, связанные с событиями.

Sr.No. Метод и описание
1 связать (тип, [данные], FN)

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

2 выкл (события [, селектор] [, обработчик (eventObject)])

Это противоположно прямому эфиру, оно удаляет связанное живое событие.

3 зависать

Имитирует зависание, например, при перемещении мыши и выключении объекта.

4 вкл (события [, селектор] [, данные], обработчик)

Связывает обработчик с событием (например, щелчком) для всех текущих и будущих элементов. Можно также связать пользовательские события.

5 один (тип, [данные], фн)

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

6 готов (фн)

Привязывает функцию, которая будет выполняться всякий раз, когда DOM готов к прохождению и манипулированию.

7 триггер (событие, [данные])

Инициировать событие на каждый соответствующий элемент.

8 triggerHandler (событие, [данные])

Запускает все связанные обработчики событий для элемента.

9 unbind ([тип], [фн])

Это делает противоположность связывания, это удаляет связанные события из каждого сопоставленного элемента.

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

Это противоположно прямому эфиру, оно удаляет связанное живое событие.

Имитирует зависание, например, при перемещении мыши и выключении объекта.

Связывает обработчик с событием (например, щелчком) для всех текущих и будущих элементов. Можно также связать пользовательские события.

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

Привязывает функцию, которая будет выполняться всякий раз, когда DOM готов к прохождению и манипулированию.

Инициировать событие на каждый соответствующий элемент.

Запускает все связанные обработчики событий для элемента.

Это делает противоположность связывания, это удаляет связанные события из каждого сопоставленного элемента.

Методы Помощника по Событию

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

Методы запуска

Ниже приведен пример, который вызывает событие размытия во всех абзацах. 

$("p").blur();

Методы привязки

Ниже приведен пример, который связывает событие click со всеми <div> —

размытие ()

Запускает событие размытия каждого соответствующего элемента.

размытие (фн)

Привязать функцию к событию размытия каждого соответствующего элемента.

менять( )

Запускает событие изменения каждого соответствующего элемента.

изменить (фн)

Связывает функцию с событием изменения каждого соответствующего элемента.

нажмите ()

Инициирует событие щелчка для каждого соответствующего элемента.

нажмите (FN)

Связывает функцию с событием щелчка каждого соответствующего элемента.

dblclick ()

Инициирует событие dblclick каждого соответствующего элемента.

dblclick (фн)

Связывает функцию с событием dblclick каждого соответствующего элемента.

ошибка( )

Запускает событие ошибки каждого соответствующего элемента.

ошибка (фн)

Привязывает функцию к событию ошибки каждого соответствующего элемента.

фокус ()

Запускает событие фокуса каждого соответствующего элемента.

фокус (фн)

Связывает функцию с событием фокуса каждого соответствующего элемента.

keydown ()

Инициирует событие keydown каждого соответствующего элемента.

Keydown (FN)

Привязать функцию к событию keydown каждого соответствующего элемента.

нажатие клавиши( )

Инициирует событие нажатия клавиши каждого соответствующего элемента.

нажатие клавиши (фн)

Привязывает функцию к событию нажатия клавиши каждого соответствующего элемента.

keyup ()

Запускает событие keyup каждого соответствующего элемента.

Keyup (FN)

Привязать функцию к событию keyup каждого соответствующего элемента.

нагрузка (фн)

Привязывает функцию к событию загрузки каждого соответствующего элемента.

mousedown (фн)

Связывает функцию с событием mousedown каждого соответствующего элемента.

мышиный центр (фн)

Привязать функцию к событию mouseenter каждого соответствующего элемента.

отпуск мышью (фн)

Привязать функцию к событию mouseleave каждого соответствующего элемента.

перемещение мыши (фн)

Привязать функцию к событию mousemove каждого соответствующего элемента.

мышка (фн)

Привязать функцию к событию mouseout каждого соответствующего элемента.

наведение мыши (фн)

Привязать функцию к событию mouseover каждого соответствующего элемента.

mouseup (fn)

Привязать функцию к событию mouseup каждого соответствующего элемента.

изменить размер (FN)

Привязать функцию к событию изменения размера каждого соответствующего элемента.

свиток (фн)

Привязать функцию к событию прокрутки каждого соответствующего элемента.

Выбрать( )

Инициируйте событие выбора каждого соответствующего элемента.

выберите (фн)

Привязать функцию к событию выбора каждого соответствующего элемента.

Отправить( )

Инициируйте событие отправки каждого соответствующего элемента.

представить (фн)

Привязать функцию к событию отправки каждого соответствующего элемента.

выгрузить (фн)

Связывает функцию с событием unload каждого соответствующего элемента.

49
Share: