jQuery - Обработка событий

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

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

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

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

Привязка обработчиков событий

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

<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>

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

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

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

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

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

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

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

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

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

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

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

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

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

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

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

Типы событий

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

blur

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

change

Происходит при изменении элемента.
3

click

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

dblclick

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

error

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

focus

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

keydown

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

keypress

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

keyup

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

load

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

mousedown

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

mouseenter

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

mouseleave

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

mousemove

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

mouseout

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

mouseover

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

mouseup

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

resize

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

scroll

Происходит при прокрутке окна.
20

select

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

submit

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

unload

Происходит при выгрузке документов.

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

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

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

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

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

altKey

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

ctrlKey

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

data

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

keyCode

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

metaKey

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

pageX

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

pageY

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

relatedTarget

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

screenX

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

screenY

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

shiftKey

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

target

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

timeStamp

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

type

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

which

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

 
<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>

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

Методы событий

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

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

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

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

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

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

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

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

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

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

Sr. No. Метод и описание
1 bind (тип, [данные], fn)

Привязывает обработчик к одному или нескольким событиям (например, щелчку) для каждого совпадающего элемента. Также можно привязать пользовательские события.
2 выкл (события [, селектор] [, обработчик (объект_события)])

Это противоположно прямой трансляции, она удаляет привязанную прямую трансляцию.
3 навести (над, за)

Имитирует наведение, например перемещение мыши на объект и выключение его.
4 on (события [, селектор] [, данные], обработчик)

Привязывает обработчик к событию (например, щелчку) для всех текущих и будущих совпадающих элементов. Также можно привязать пользовательские события.
5 один (тип, [данные], fn)

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

Связывает функцию, которая будет выполняться всякий раз, когда DOM готов для обхода и манипулирования.
7 триггер (событие, [данные])

Запускать событие для каждого совпадающего элемента.
8 triggerHandler (событие, [данные])

Запускает все связанные обработчики событий для элемента.
9 unbind ([type], [fn])

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

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

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

Методы триггера

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

$("p").blur();

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

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

$("div").click( function () { 
   // do something here
});
Sr. No. Метод и описание
1

blur( )

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

blur( fn )

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

change( )

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

change( fn )

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

click( )

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

click( fn )

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

dblclick( )

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

dblclick( fn )

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

error( )

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

error( fn )

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

focus( )

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

focus( fn )

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

keydown( )

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

keydown( fn )

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

keypress( )

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

keypress( fn )

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

keyup( )

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

keyup( fn )

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

load( fn )

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

mousedown( fn )

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

mouseenter( fn )

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

mouseleave( fn )

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

mousemove( fn )

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

mouseout( fn )

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

mouseover( fn )

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

mouseup( fn )

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

resize( fn )

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

scroll( fn )

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

select( )

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

select( fn )

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

submit( )

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

submit( fn )

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

unload( fn )

Связывает функцию с событием выгрузки каждого совпадающего элемента.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved