Установка обработчика событий bind

.bind() — устанавливает обработчик события на выбранные элементы страницы.

Имеет три варианта использования:

  • eventType — название события. К примеру, «click», «focusin,» или название собственного события;
  • eventData — данные, передаваемые обработчику событий;
  • handler — функция, которая будет запускаться каждый раз при наступлении события.

  • eventType — название события. К примеру, «click», «focusin,» или название собственного события;
  • eventData — данные, передаваемые обработчику событий;
  • preventBubble — false для отмены выполнения обрабатываемого события. По умолчанию true

  • events — объект с типами события и функции, которая запустится.

Начиная с jQuery 3.0 метод .bind() устарел. Начиная с jQuery 1.7, для прикрепления обработчиков событий, он был заменен на метод .on(), поэтому его использование стало бессмысленно.

Если в качестве eventType вы передаете название собственного события, их можно вызвать самим с помощью JavaScript кода, используя .trigger() или .triggerHandler, т.к. события никогда не вызываются браузером.

Если строка eventType содержит (.), то событие связано с определённым пространством имён, а данный знак является разделителем.

Например, в .bind( «click.name», handler ), строка click это тип, а name — пространство имён.

Существуют сокращённые методы браузерных событий, типа .click().

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

Обычное использование метода .bind():

Данный код настраивает элемент с id=»foo» реагировать на событие click. В результате, если пользователь кликнет на данный элемент, то выпрыгнет сообщение.

Множественные события

Назначить несколько событий можно перечислив их через пробел, например:

 

 

В результате, когда курсор мыши войдет в область элемент с id=»foo», ему присвоится класс «entered» (предположим, что изначально этого класса у элемента нет), а после того, как  курсор покинет область элемента, класс будет удален.

Начиная с jQuery 1.4, множественные события можно передавать в объекте:

Обработчики событий

Параметр handler действует в качестве функции обратного действия. Внутри данной функции ключевое слово this ссылается на элемент, к которому прикреплён обработчик. Например:

Начиная с jQuery 1.4.2 многократная установка одной функции в качестве обработчика одного события не приведет к ошибке.

Начиная с jQuery 1.4.3 вы можете передать false вместо функции обработчика. Это эквивалентно следующей функции: function(){ return false; }. В дальнейшем её можно отключить, используя: .unbind( eventName, false ).

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

Обработчик handler может принимать параметры. При вызове функции, объект события будет передан в первом параметре.+

Возврат false из обработчика, эквивалентен вызову .preventDefault() и .stopPropagation().

Использование объекта события выглядит так:

Обратите внимание на параметр, который мы передаём в анонимную функцию. При клике по элементу с id=»foo», мы увидим сообщение с координатами курсора мыши в момент клика.

Передача данных

Необязательный параметр eventData используется редко. Данный параметр, позволяет нам передавать в обработчик дополнительную информацию. Представим, что у нас есть два обработчика, которые ссылаются на одну и ту же внешнюю переменную:

В обоих случая мы увидим сообщение “Not in the face!”, даже если в нашем случае значение переменной меняется. Для того, чтобы логика не была нарушена, передаём eventData:

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *