jQuery: Специальные события

Владимир | | JavaScript, Web разработка.

jquery_tripleclick

Этот пост — перевод статьи Брэндона Аарона (Brandon Aaron) Special Events, в котором он рассказывает об использовании специальных событий jQuery и приводит пример создания обработчика тройного клика мышкой.

jQuery, начиная с версии 1.2.2, имеет API для создания "специальных событий". Эти события называются специальными, потому что позволяют выполнять некоторые дополнительные действия при их возникновении, а также имеют опцию, позволяющую обходить внутреннею систему событий jQuery. Используя эти специальные события вы можете создавать пользовательские события, которые требуют выполнения каких-то действий перед началом работы (при установке) или должны переопределять поведение встроенных событий.

Мы использовали специальные события jQuery для создания событий “mouseenter” и “mouseleave”, а также для создания события “ready” и для нормализации события “mousewheel” в плагине mouse wheel.

Специальное событие: “tripleclick” (тройной клик).

Для иллюстрации API я собираюсь создать новый тип события под названием "tripleclick" (тройной клик). Это событие будет возникать когда пользователь кликнет по элементу три раза. Если бы мы собирались сделать это событие обычным jQuery плагином мы бы создали jQuery.fn.tripleclick. Но я хочу использовать преимущества синтаксиса bind вместе с другими возможностями, которые предоставляет система событий jQuery, такими как нормализация события, данные и пространства имен.

Прежде всего нам необходимо создать специальное событие. Каждое такое событие имеет методы setup и teardown. Метод setup вызывается когда происходит присоединение события (bind), а teardown — когда событие отсоединяется.

Важно отметить, что эти два метода вызываются только при первом присоединении (отсоединении) события определенного типа к определенному элементу. Это происходит потому, что система событий jQuery в действительности присоединяет только один обработчик каждого типа к каждому элементу и сама управляет остальными присоединенными обработчиками. В jQuery 1.3 есть новый тип специального события под названием "Special All", который работает со всеми обработчиками, но у него немного другое поведение. И эта тема для другой статьи.

Основа события "tripleclick" выглядит следующим образом.

jQuery.event.special.tripleclick = {
    setup: function(data, namespaces) {
        var elem = this;
    },

    teardown: function(namespaces) {
        var elem = this;
    }
};

Отметьте, что методу setup событие передает данные и пространство имен, которые мы используем при присоединении события. Точно также методу teardown событие передает пространство имен, которое используется при отсоединение события. Хотя, от них здесь пользы не много, т.к. только данные и пространство имен связанные с самым первым обработчиком события будут присоединены к определенному элементу страницы. Но вы можете использовать эти данные для того, чтобы сконфигурировать событие для всех обработчиков этого типа, присоединенных к элементу. Областью видимости, или значением this, этих двух методов является элемент к которому присоединяется событие.

Фактически мы будем использовать встроенное события "click" для того, чтобы отслеживать количество кликов по элементу. Кроме того, нам нужен обработчик, который и будет выполнять работу отслеживания кликов. Я собираюсь добавить третий метод под названием handler для специального события "tripleclick". Чтобы сделать код немного проще я буду отслеживать количество кликов используя jQuery data API.

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

jQuery.event.special.tripleclick = {
    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },

    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler);
    },

handler: function(event) { var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0; clicks += 1; if ( clicks === 3 ) { clicks = 0; // устанавливаем тип события "tripleclick" event.type = "tripleclick"; // позволяем jQuery запустить обработчики события "tripleclick" jQuery.event.handle.apply(this, arguments) } $elem.data('clicks', clicks); } };

Рассмотрим код обработчика (handler). Прежде всего мы определяем количество кликов с помощью data API и увеличиваем его на 1. Затем мы проверяем, было ли выполнено три клика. Если да, сбрасываем счетчик кликов и запускаем другие обработчики событий. Наконец сохраняем новое значение количества кликов по элементу с помощью data API.

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

Пример

Мы можем использовать метод bind с нашим специальным событием точно также как и с любым другим. Например, присоединить событие "tripleclick" к div'у можно с помощью следующего кода.

jQuery('div').bind('tripleclick', function(event) {
    alert('triple clicked');
});

Посмотреть пример использования нашего специального события вы можете здесь.

Вы можете улучшить событие сделав так, чтобы все клики выполнялись в течении заданного промежутка времени. Этого можно достичь сохраняя свойство event.timeStamp предыдущего клика и сравнивая разницу времени между ним и последним кликом.

Возвращаемое значение

Я упоминал в начале этой статьи, что специальные события имеют возможность обходить внутреннею систему событий jQuery. В набор функций, которые можно пропустить входит непосредственно присоединение события с использованием методов addEventListener или attachEvent. Будут они пропущены или нет зависит от возвращаемого значения. Любое значение кроме false запрещает jQuery непосредственно присоединять событие к элементу. Другими словами если вы добавите return false в методы setup и teardown вашего специального события, оно будет использовать родные DOM API для присоединения события элементу. В случае нашего события "tripleclick" мы не хотим привязывать событие используя родные DOM API, поэтому мы не возвращаем ничего (undefined).

Полезные ресурсы

Логос-Аудит — бухгалтерское обслуживание фирмы для экономных.

  • Спасибо. Я новичек в построении сайтов, и давно искал что-то подобное. С html кодами вроде уже разабрался, но надо расти дольше.

  • Спасибо. Я новичек в построении сайтов, и давно искал что-то подобное. С html кодами вроде уже разабрался, но надо расти дольше.

  • Big_Shark

    Мы можем кликнуть 3 раза с большим интервалом и на 3 клик сработает JS какой смысл?
    Необходимо скидывать количество кликов на 0 если некоторое время клики не поступают.
    А вообще мне кажется 3 клика уже перебор.
    Насколько я знаю не одна ОС не использует 3 клика над работой над каким либо объектом.

    • @Big_Shark

      >Мы можем кликнуть 3 раза с большим интервалом и на 3 клик сработает JS какой смысл?

      Так и не надо искать здесь никакого смысла. Тройной клик — это просто пример того, как создаются специальные события в jQuery.

      >Насколько я знаю не одна ОС не использует 3 клика над работой над каким либо объектом.

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

      • Big_Shark

        Так и не надо искать здесь никакого смысла. Тройной клик — это просто пример того, как создаются специальные события в jQuery.

        Если так то статья хорошая.

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

        Хм точно. Очень редко пользуюсь этой возможностью.

    • Ну ОСей много )))
      Как Вам комбинация нажать правую кнопку мыши и три раза щелкнуть левой?
      Операционная система «Оберон»
      Хотя Windows и UNIX действительно тройной клик не используют…

  • Big_Shark

    Мы можем кликнуть 3 раза с большим интервалом и на 3 клик сработает JS какой смысл?
    Необходимо скидывать количество кликов на 0 если некоторое время клики не поступают.
    А вообще мне кажется 3 клика уже перебор.
    Насколько я знаю не одна ОС не использует 3 клика над работой над каким либо объектом.

    • @Big_Shark

      >Мы можем кликнуть 3 раза с большим интервалом и на 3 клик сработает JS какой смысл?

      Так и не надо искать здесь никакого смысла. Тройной клик — это просто пример того, как создаются специальные события в jQuery.

      >Насколько я знаю не одна ОС не использует 3 клика над работой над каким либо объектом.

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

      • Big_Shark

        Так и не надо искать здесь никакого смысла. Тройной клик — это просто пример того, как создаются специальные события в jQuery.

        Если так то статья хорошая.

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

        Хм точно. Очень редко пользуюсь этой возможностью.

    • Ну ОСей много )))
      Как Вам комбинация нажать правую кнопку мыши и три раза щелкнуть левой?
      Операционная система «Оберон»
      Хотя Windows и UNIX действительно тройной клик не используют…

  • Да, переводчик из меня не очень 🙂
    Два предложения я ухитрился пропустить.

    Вы можете улучшить событие сделав так чтобы все клики выполнялись в одном промежутке времени. Этого можно достичь сохраняя свойство event.timeStamp предыдущего клика и сравнивая разницу времени между ним и последним кликом.

    Кроме того, в комментариях к оригиналу статьи есть ссылка на пример скрипта с проверкой времени и его демо версию.

  • Да, переводчик из меня не очень 🙂
    Два предложения я ухитрился пропустить.

    Вы можете улучшить событие сделав так чтобы все клики выполнялись в одном промежутке времени. Этого можно достичь сохраняя свойство event.timeStamp предыдущего клика и сравнивая разницу времени между ним и последним кликом.

    Кроме того, в комментариях к оригиналу статьи есть ссылка на пример скрипта с проверкой времени и его демо версию.

  • Спс большое за сайт и труд ваш прекрасно просто Thanks

  • Спс большое за сайт и труд ваш прекрасно просто Thanks

  • Спс за разжеванное объяснение. Я давно хотела сделать что-то подобное, но к сожалению я новенькая в этих хтмл-кодах. Вы не против если я возьму код и поэкспериментирую у себя на сайте?
    Ещё раз спасибо.

  • Спс за разжеванное объяснение. Я давно хотела сделать что-то подобное, но к сожалению я новенькая в этих хтмл-кодах. Вы не против если я возьму код и поэкспериментирую у себя на сайте?
    Ещё раз спасибо.

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

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

  • То что искал, спасибо

  • То что искал, спасибо

  • Хороший материал, спасибо

  • Хороший материал, спасибо

  • Давно искал что-то подобное…нашол

  • Давно искал что-то подобное…нашол

  • Сложно было разбираться по теме, но статья помогла спасибо, для меня пока не просто, но учусь

  • Сложно было разбираться по теме, но статья помогла спасибо, для меня пока не просто, но учусь

  • Timyrio

    супер статейка__почти то что искал__но помогите, автор, в следующем:

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

    Например: кликаем на объект №1, потом на №2, потом на объект №1 и опять на №1 — и по второму клику (не даблклик) на объект №1 событие исполняется, тоесть когда кликнули первый раз на №1, потом на №2, то щет кликов по первому объекту обнуляются.

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

      2) В обработчиках проверяете значения счетчиков и выполняете или не выполняете действие.

      Т.е. будет что-то вроде.
      var counter1 = 0;
      var counter2 = 0;

      $('#obj1').click(function() {
      counter1++;
      counter2 = 0;
      if (counter1 == 2) {
      //выполнить нужное действие
      }
      });

  • Timyrio

    1. Как обратится ко всем переменным в скрипте + исключить одну из них?

    2. Как обратится ко всем переменным в скрипте, например имя которых начинается с «counter»?

    Переменные к которым нужно обратится, без перечисления каждой:
    counter1
    counter2
    counter3
    counter4
    counter5
    и т.д.

    • В вашем случае удобнее всего будет создать массив счетчиков, а не отдельные переменные.
      Тогда сможете обойти весь массив в цикле и, если необходимо, какие-то его элементы пропустить.