www.jQueryBook.ru - jQuery документация

 

Сегодня: 06 декабря 2016 года, Вторник
Раздел API на стадии наполнения...

 

 

 

  • Категории: Events › Event Handler Attachment

    .bind()

    Устанавливает обработчик события для всех элементов набора jQuery.

Синтаксис и описание:

  • Добавлено в jQuery 1.0.bind( eventType, [ eventData ,] handler( [eventObject] ) )

  • Добавлено в jQuery 1.4.bind( events )

  • Команда .bind() устанавливает функцию handler() как обработчик события eventType для всех элементов набора jQuery. Может связывать с обработчиками любые события JavaScript, а также собственные (пользовательские) события.

Возвращаемое значение: (объект) Набор jQuery.

Параметры:

  • eventType – (строка) Тип события (или несколько типов событий, разделенных пробелами). Допустимы абсолютно все типы событий JavaScript (например: focus, mouseover, resize и другие) и даже именованные (см. Примечание 2). Также может содержать нестандартные имена пользовательских событий, которые не предусмотрены в поведении браузера (обработчики таких событий могут быть вызваны в jQuery искусственно с помощью методов .trigger() или .triggerHandler()).

  • eventData – (объект) Данные, передаваемые обработчику события в виде event.data (свойства data экземпляра Event). Значение переменных, передаваемых в eventData, фиксируется на момент объявления обработчика, а не на момент его вызова. Если этот необязательный параметр опущен, то функция handler() (обработчик события) передается во втором параметре.

  • handler( [eventObject] ) – Функция, объявляемая обработчиком события eventType. В качестве первого параметра она получает eventObject (экземпляр объекта Event). Контекст this вызова функции ссылается на текущий элемент.


              function handler(eventObject) {
                  this; // текущий DOM-элемент.
                }
  • events – (объект) Содержит одну или несколько пар - типов событий и их обработчиков в виде {'eventType': handler(),...}


  1. Примечание:

    .bind() является в jQuery основным методом для прикрепления обработчиков событий. Но библиотека предоставляет для удобства целый ряд укороченных вариантов метода .bind() для установки обработчиков стандартных типов JS событий.

    Это команды:   .blur(),   .focus(),   .focusin(),   .focusout(),   .load(),   .resize(),   .scroll(),   .unload(),   .click(),   .dblclick(),   .mousedown(),   .mouseup(),   .mousemove(),   .mouseover(),   .mouseout(),   .mouseenter(),   .mouseleave(),   .change(),   .select(),   .submit(),   .keydown(),   .keypress(),   .keyup(),   .error().


  2. Примечание:

    События могут группироваться с помощью определения в пространстве имен, когда собственное имя пространства имен добавляется к имени события в виде суффикса через точку. (В дальнейшем такими именованными событиями можно оперировать как с единым целым, используя для доступа к ним имя пространства имен обработчиков событий. Например, удалить сразу всю группу обработчиков событий. См. метод .unbind())

          $('#foo').bind('click', handler);
          $('#foo1').bind('click.myEvents', handler1);
          $('#foo2').bind('click.myEvents', handler2);
          $('#foo3').bind('mouseover.myEvents', handler3);

          $('*').unbind('click.myEvents'); // удалит только все обработчики события click пространства имен myEvents: handler1 и handler2.

          $('*').unbind('.myEvents'); // удалит только все обработчики всех событий в пространстве имен myEvents: handler1, handler2 и handler3.

  3. Примечание:

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

          $('form').bind('submit', function(e){
              ... // Какие-нибудь действия
              e.preventDefault(); // Предотвращение отправки формы
            });

  4. Примечание:

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

          $('span').bind('click', function(e){
              e.stopPropagation(); // Запрет всплытия события
              ... // Какие-нибудь действия
            });

  5. Примечание:

    Чтобы предотвратить поведение браузера по умолчанию и запретить распространение (всплытия) события по дереву DOM, функция-обработчик должна возвратить false.

          $('a').bind('click', function(e){
              ... // Какие-нибудь действия
              return false; // Отмена и всплытия события, и поведения браузера по умолчанию - перехода по ссылке.
            });

  6. Примечание:

    Начиная с jQuery 1.4.2 одинаковые обработчики не "склеиваются" (дубликаты не игнорируются) как раньше при возникновении события. Например, следующий код приведет к тому, что сообщение 'Привет!' при одном клике на кнопке будет сгенерировано два раза.

          function test(){ alert("Привет!"); }
          $("button").bind('click', test );
          $("button").bind('click', test );


Примеры:

  1. Для элемента с id="foo" установить обработчик JS события - щелчка мышью.

    $('#foo').bind('click', function() {
      alert('Пользователь кликнул на элементе с id="foo"');
     });
  2. Установить на элементе обработчик сразу для нескольких событий

    $('#foo').bind('mouseenter mouseleave', function() {
      $(this).toggleClass('entered');
     });
  3. В версии jQuery 1.4 можно устанавливать сразу несколько разных обработчиков разных событий, передав их команде .bind() в виде объекта.

    $('#foo').bind({
      click: function() {
        // какие-либо действия
      },
      mouseenter: function() {
        // какие-либо действия
      }
     });
  4. При клике на элементе с id='foo' выдаст сообщение 'Пока!'.
    При клике на элементе с id='bar' также выдаст сообщение 'Пока!', т.к. на момент вызова обработчика переменная message будет иметь значение 'Пока!'.

    var message = 'Привет!';
    $('#foo').bind('click', function() {
      alert(message);
     });
    message = 'Пока!';
    $('#bar').bind('click', function() {
      alert(message);
     });
  5. При клике на элементе с id='foo' выдаст сообщение 'Привет!'.
    При клике на элементе с id='bar' также выдаст сообщение 'Пока!', т.к. значения переменных в данных, переданных функциям через Event, фиксируются на момент объявления этих функций обработчиками соответствующих событий, а не на момент их срабатывания. (См. описание - параметр eventData)

    var message = 'Привет!';
    $('#foo').bind('click', {msg: message}, function(event) {
      alert(event.data.msg);
     });
    message = 'Пока!';
    $('#bar').bind('click', {msg: message}, function(event) {
      alert(event.data.msg);
     });
  6. По событию готовности document (сразу после того, как исходный код страницы будет полностью загружен браузером) для элемента с id='foo' установим обработчик события click с использованием свойств экземпляра объекта Event для отображения координат щелчка.

    $(document).ready(function() {
      $('#foo').bind('click', function(event) {
         alert('Координаты курсора мыши ('
          + event.pageX + ', ' + event.pageY + ')');
        });
     });

[ наверх ]










 




Справочник по jQuery JavaScript API на русском языке