jQuery => События

замечания

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

Прикрепить и отсоединить обработчики событий

Прикрепить обработчик событий

Начиная с версии 1.7 jQuery имеет API событий .on() . Таким образом, любое стандартное событие javascript или настраиваемое событие может быть привязано к выбранному в данный момент элементу jQuery. Есть ярлыки, такие как .click() , но .on() дает вам больше опций.

HTML

<button id="foo">bar</button>

JQuery

$( "#foo" ).on( "click", function() {
  console.log( $( this ).text() ); //bar
});

Отсоединить обработчик событий

Естественно, у вас есть возможность отключать события от объектов jQuery. Вы делаете это с помощью .off( events [, selector ] [, handler ] ) .

HTML

<button id="hello">hello</button>

JQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off();
});

При нажатии кнопки $(this) будет ссылаться на текущий объект jQuery и удалит из него все прикрепленные обработчики событий. Вы также можете указать, какой обработчик должен быть удален.

JQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off('click');
});

$('#hello').on('mouseenter', function(){
    console.log('you are about to click');
});

В этом случае событие mouseenter будет функционировать после нажатия.

Делегированные события

Начнем с примера. Вот очень простой пример HTML.

Пример HTML

<html>
    <head>
    </head>
    <body>
        <ul>
            <li>
                <a href="some_url/">Link 1</a>
            </li>
            <li>
                <a href="some_url/">Link 2</a>
            </li>
            <li>
                <a href="some_url/">Link 3</a>
            </li>
        </ul>
    </body>
</html>

Эта проблема

Теперь в этом примере мы хотим добавить прослушиватель событий ко всем элементам <a> . Проблема в том, что список в этом примере является динамическим. Элементы <li> добавляются и удаляются с течением времени. Тем не менее, страница не обновляется между изменениями, что позволит нам использовать простые прослушиватели событий щелчка для объектов ссылок (например, $('a').click() ).

Проблема заключается в том, как добавлять события в элементы <a> которые приходят и уходят.

Фоновая информация - распространение событий

Делегированные события возможны только из-за распространения событий (часто называемых пузырьками событий). Каждый раз, когда запускается какое-либо событие, он все время будет пузыриться (до корня документа). Они делегируют обработку события не изменяющемуся элементу-предшественнику, отсюда и название «делегированные» события.

Итак, в приведенном выше примере, нажатие ссылки <a> element приведет к событию «click» в этих элементах в следующем порядке:

литий
уль
тело
HTML
корень документа

Решение

Зная, что происходит в пузырьках событий, мы можем поймать одно из необходимых событий, которые распространяются через наш HTML.

Хорошим местом для этого в этом примере является элемент <ul> , поскольку этот элемент не является динамическим:

$('ul').on('click', 'a', function () {
  console.log(this.href); // jQuery binds the event function to the targeted DOM element
                          // this way `this` refers to the anchor and not to the list
  // Whatever you want to do when link is clicked
});

В приведенном выше:

У нас есть «ul», который является получателем этого прослушивателя событий
Первый параметр («click») определяет, какие события мы пытаемся обнаружить.
Второй параметр ('a') используется, чтобы объявить, откуда должно происходить событие (из всех дочерних элементов этого получателя события, ul).
Наконец, третий параметр - это код, который выполняется, если выполняются требования первого и второго параметров.

Подробнее о том, как работает решение

Пользователь кликает элемент <a>
Это вызывает событие click на элементе <a> .
Событие начинается в направлении к корню документа.
Событие пузырится сначала на элемент <li> а затем на элемент <ul> .
Слушатель событий запускается, поскольку элемент <ul> имеет подключенный прослушиватель событий.
Слушатель событий сначала обнаруживает событие запуска. Событие барботирования - это «щелчок», и слушатель имеет «щелчок», это пропуск.
Проверки прослушивателя пытаются сопоставить второй параметр ('a') с каждым элементом в цепочке пузырьков. Поскольку последний элемент в цепочке - это «a», это соответствует фильтру, и это тоже пропуск.
Код в третьем параметре выполняется с использованием согласованного пункта , как это this . Если функция не включает вызов stopPropagation() , событие будет продолжать распространяться вверх к корню ( document ).

Примечание. Если подходящий не изменяющийся предок недоступен / удобен, вы должны использовать document . Как привычка не используют 'body' по следующим причинам:

body есть ошибка, связанная с стилем, что может означать, что события мыши не пузырятся на нем. Это зависит от браузера и может произойти, когда расчетная высота тела равна 0 (например, когда все дочерние элементы имеют абсолютные позиции). События мыши всегда document .
document всегда существует для вашего скрипта, поэтому вы можете прикреплять делегированные обработчики для document за пределами обработчика DOM-ready и быть уверенным, что они все равно будут работать.

Загрузка документа .load ()

Если вы хотите, чтобы ваш сценарий дождался загрузки определенного ресурса, например изображения или PDF, вы можете использовать .load() , который является ярлыком для ярлыка для .on( "load", handler) .

HTML

<img src="image.jpeg" alt="image" id="image">

JQuery

$( "#image" ).load(function() {
  // run script
});

События для повторения элементов без использования идентификаторов

проблема

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

Решение

Дайте всем общим элементам общий класс
Применить прослушиватель событий к классу. this обработчик внутренних событий является элементом выбора соответствия, произошедшее на
Перейдите к внешнему самому повторяющему контейнеру для этого экземпляра, начиная с this
Используйте find() в этом контейнере, чтобы изолировать другие элементы, специфичные для этого экземпляра

HTML

<div class="item-wrapper" data-item_id="346">
   <div class="item"><span class="person">Fred</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>
<div class="item-wrapper" data-item_id="393">
   <div clss="item"><span class="person">Wilma</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>

JQuery

$(function() {
  $('.delete').on('click', function() {
    // "this" is element event occured on
    var $btn = $(this);
    // traverse to wrapper container
    var $itemWrap = $btn.closest('.item-wrapper');
    // look within wrapper to get person for this button instance
    var person = $itemWrap.find('.person').text();
    // send delete to server and remove from page on success of ajax
    $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
      $itemWrap.remove()
    }).fail(function() {
      alert('Ooops, not deleted at server');
    });
  });
});

originalEvent

Иногда будут свойства, недоступные в событии jQuery. Для доступа к основным свойствам используйте Event.originalEvent

Получить направление прокрутки

$(document).on("wheel",function(e){
    console.log(e.originalEvent.deltaY)
    // Returns a value between -100 and 100 depending on the direction you are scrolling
})

Включение и отключение определенных событий через jQuery. (Именованные слушатели)

Иногда вы хотите отключить всех ранее зарегистрированных слушателей.

//Adding a normal click handler
$(document).on("click",function(){
    console.log("Document Clicked 1")
});
//Adding another click handler
$(document).on("click",function(){
    console.log("Document Clicked 2")
});
//Removing all registered handlers.
$(document).off("click")

Проблема с этим методом заключается в том, что ВСЕ слушатели, привязанные к document другими плагинами и т. Д., Также будут удалены.

Чаще всего, мы хотим отделить всех слушателей, прикрепленных только нами.

Чтобы достичь этого, мы можем связать именованных слушателей,

//Add named event listener.
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 1")
});
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 2")
});

//Remove named event listener.
$(document).off("click.mymodule");

Это гарантирует, что любой другой прослушиватель кликов не будет непреднамеренно изменен.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

jQuery
События

Поиск…

замечания

Прикрепить и отсоединить обработчики событий

Прикрепить обработчик событий

HTML

JQuery

Отсоединить обработчик событий

HTML

JQuery

JQuery

Делегированные события

Пример HTML

Эта проблема

Фоновая информация - распространение событий

Решение

Подробнее о том, как работает решение

Загрузка документа .load ()

События для повторения элементов без использования идентификаторов

originalEvent

Получить направление прокрутки

Включение и отключение определенных событий через jQuery. (Именованные слушатели)