web-development.ucoz.ru

Описание: Прикрепляет функции обработчика событий для одного или нескольких событий к выбранным элементам.

Метод .on() присоединяет обработчики событий к выбранному набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on() предоставляет всю функциональность, необходимую для подключения обработчиков событий. Для помощи в переходе от более старых методов событийjQuery, смотрите .bind(), .delegate(), и .live(). Для удаления событий, привязанных с помощью .on(), смотрите .off(). Чтобы прикрепить событие, которое выполняется только один раз, а затем удаляет себя, смотрите .one().

Имена событий и пространства имен

Любые имена событий могут быть использованы в качестве аргумента события. jQuery будет проходить через стандартные типы событий браузера JavaScript, вызывая функцию обработчика когда браузер генерирует события, в связи с действиями пользователя, такие как click. В дополнение, метод .trigger() может вызвать как имена событий стандартного браузера, так и пользовательские имена событий прилагаемые к обработчику.

Имя события могут быть квалифицированы по именам событий, которые упрощают удаление или срабатывание события. Для примера, "click.myPlugin.simple" определяется как myPlugin и простого имени пространтсва для данного события нажатия. Обработчик события нажатия, подключенный через эту строку может быть удален с помощью .off("click.myPlugin") или .off("click.simple"), не нарушая другие обработчики нажатия, прикрепленные к элементам. Пространства имен аналогичны CSS классам в том, что они не являются иерархическими; необходимо только имя для соответствия. Пространства имен, начинающиеся с подчеркивания зарезервированы для использования в jQuery.

Во второй форме .on(), аргумент карта-событий является объектом JavaScript, или "карты". Ключи являются строками в той же форме, как и аргумент события с разделенными пробелами именами типов событий и дополнительными пространствами имен. Значением для каждого ключа является функция (или значение false), которое используется как обработчик, вместо последнего аргумента метода. В остальном, обе формы идентичны в своем поведении, как описано ниже.

Прямые и делегированные события

Большинство событий браузеров пузырьковые, или распространяющиеся, от глубокого, внутреннего элемента (цель события) в документе, где они происходят все, вплоть до body и элемента document. В Internet Explorer 8 и более ранних, несколько событий, такие как change и submit изначально не пузырьковые, но jQuery исправляет их на пузырьковые и создает последовательное кросс-браузерное поведение.

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

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

Обработчики событий привязаны только к выбранному элементу; они должны существовать на странице во время того, как ваш кода делает вызов .on(). Чтобы обеспечить присутствие элементов и их выбор, выполните привязку событий в документе, к готовому обработчику для элементов, которые находятся в HTML разметке на странице. Если новый HTML в настоящее время вводится в страницу, выбор элементов и передача обработчиков событий произойдет после того как новый HTML помещается на страницу. Или используйте делегированные события для присоединения обработчика событий, как описано далее.

Делегированные события имеют то преимущество, что они могут обрабатывать события от элементов-потомков, которые добавляются к документу позже. Выбрав элемент, который гарантированно будет присутствовать во время того, как делегированный обработчик событий привязан, вы можете использовать делегированные события, чтобы избежать необходимости часто привязывать и удалять обработчики событий. Этот элемент может быть элементом-контейнером, представленным в дизайне Model-View-Controller, для примера, document, если обработчик события хочет следить за всеми событиями в пузырьковом документе. Элемент document доступен в head документа перед загрузкой любого другого HTML, таким образом безопасно прикрепить события не дожидаясь, пока документ будет готов.

Еще одним преимуществом делегированных событий является их потенциал в намного меньших накладных расходах, когда множество элементов должно быть проверено. Представлена таблица с 1000 строками в элементе tbody, этот пример привязывает обработчик к 1000 элементам:

$("#dataTable tbody tr").on("click", function(event){
 alert($(this).text());
});

Делегированные-события привязывают обработчик событий только к одному элементу, tbody, и событию нужно только перейти на один уровень вверх (от нажатого tr к tbody):

$("#dataTable tbody").on("click", "tr", function(event){
 alert($(this).text());
});

Обработчик события и его окружение

Аргумент handler является функцией (или значением false, смотрите ниже), и требуется до тех пор пока форма карты-событий используется. Вы можете предоставить анонимный обработчик функции в точке вызова .on(), в качестве примеров показанных выше, или объявить имя функции и передать его имя:

function notify() { alert("clicked"); }
$("button").on("click", notify);

Когда браузер инициирует событие или другой JavaScript вызывает метод jQuery .trigger(), jQuery передает обработчику объект события, его можно использовать для анализа и изменить статус события. Этот объект является нормированным подмножеством данных, представленных браузером; немодифицированные собственный объект события браузера доступен в event.originalEvent. Например, event.type содержит название события (например, "resize") и event.target указывает на глубокий (внутренний) элемент, в котором произошло событие.

По умолчанию, большинство событий являются пузырьковыми с первоначальной целью элементом document. На каждый элемент встречающийся на пути, jQuery вызывает любые соответствующие обработчики событий, которые были прикреплены. Обработчик может предотвратить пузырьковые события выше по дереву документа (и тем самым не допустить обработчики этих элементов для выполнения) вызвав event.stopPropagation(). Любые другие обработчики, присоединенные на текущий элемент однако будут работать. Чтобы не допустить этого, вызовите event.stopImmediatePropagation(). (Обработчики событий, связанные с элементом вызываются в том же порядке, в котором они были привязаны.)

Кроме того, обработчик может вызвать event.preventDefault(), чтобы отменить любое действие по умолчанию, которое браузер может иметь к этому событию, например, действием по умолчанию на событие click является переход по ссылке. Не все события браузера по умолчанию имеют действия, и не все действия по умолчанию можно отменить. Для подробностей смотрите Спецификация событий W3C.

Возвращение false из обработчика события будет автоматически вызывать event.stopPropagation() и event.preventDefault(). Значение false также может быть передано в обработчик как сокращение для function(){ return false; }. Таким образом, $("a.disabled").on("click", false); присоединяет обработчик событий ко всем ссылкам с классом "disabled", который предотвращает их от следования по ссылке при щелчке, а также останавливает событие от восхождения по дереву.

Когда jQuery вызывает обработчик, ключевое слово this является ссылкой на элемент, где происходит доставка этого события; для непосредственно связанных событий это элемент, в котором событие было привязано и делегированных событий это элемент, соответствующий селектору. (Обратите внимание, что this не может быть равным event.target если событие унаследовано от потомка элемента.) Чтобы создать объект jQuery из элемента, так чтобы он мог быть использован с методами jQuery, используйте $(this).

Передача данных в обработчик

Если аргумент данные предоставляется в .on() и он не null или undefined, он передается в обработчик свойства event.data каждый раз, когда событие происходит. Аргумент данные может быть любого типа, но если строка используется, селектор должен либо быть предоставлен, либо явно передаваться как null, так что данные не содержат ошибки для селектора. Лучшей практикой является использование объекта (карты), так что несколько значений может быть передано в качестве свойства.

Начиная с jQuery 1.4, тот же обработчик событий может быть связан с элементом несколько раз. Это особенно полезно, когда функция event.data используется, или другие уникальные данные находятся в привязке к функции обработчика события. Например:

Этот код будет генерировать два разных предупреждения при нажатии кнопки.

В качестве альтернативы или в дополнение к аргументу данные, предоставленным в метод .on(), вы также можете передавать данные в обработчик событий с помощью второго аргумента .trigger() или .triggerHandler().

Производительность события

В большинстве случаев, такое событие, как click происходит редко и результаты не вызывают серьезную озабоченность. Тем не менее, высокая частота событий, таких как mousemove или scroll может происходить десятки раз в секунду, и в этих случаях, она становится все более важным используемым событием. Производительность может быть увеличена за счет сокращения объема работы, проделанной в самом обработчике, кэшировании информации необходимой для обработчика, или ограничении скорости актуальных обновлений страницы с помощью setTimeout.

Прикрепление большого количества делегированных событий к обработчикам в верхней части дерева документа может привести к снижению производительности. Каждый раз, когда происходит событие, jQuery должно сравнить все селекторы из всех вложенных событий этого типа для каждого элемента в пути от цели события до верхней части документа. Для лучшей производительности, прикрепляйте делегированные события в документе как можно ближе к элементу цели. Избегайте чрезмерного использования document и document.body для делегированных событий в больших документах.

jQuery может обрабатывать простые селекторы формы tag#id.class очень быстро, когда они используются для фильтрации делегированных события. Таким образом, "#myForm", "a.external", и "button" являются быстрыми селекторами. Делегированные события, которые используют более сложные селекторы, в частности, иерархические, могут быть в несколько раз медленнее, - хотя они по-прежнему достаточно быстрые для большинства приложений. Иерархические селекторы часто можно избежать только путем присоединения обработчика к более соответствующему пункту в документе. Например, вместо $("body").on("click", "#commentForm .addNew", addComment) используйте $("#commentForm").on("click", ".addNew", addComment).

Дополнительные примечания

Есть способы сокращения для некоторых событий, такой как .click(), который может быть использован для подключения или вызова обработчика событий. Для полного списка сокращенных методов смотрите События jQuery.

Несмотря на это, настоятельно не рекомендуется в новом коде вместо имени псевдо-событя "hover" использовать сокращения "mouseenter mouseleave". Это прикрепит один обработчик событий для этих двух событий, и обработчик должен изучить event.type, чтобы определить, происходит ли событие mouseenter или mouseleave. Не путайте имя псевдо-события "hover" с методом .hover(), который принимает одну или две функции.

Система событий jQuery требует, чтобы элемент DOM позволял присоединять данные через свойства элемента, так что события могут быть отслежены и доставлены. Элементы object, embed, и applet не могут присоединять данные, и, следовательно, не могут иметь события jQuery, связанные с ними.

События focus и blur, определены консорциумом W3C как не пузырьковые, но jQuery определяет кросс-браузерные события focusin и focusout как пузырьковые. Когда focus и blur используются, чтобы приложить делегированные обработчики событий, jQuery отображает имена и доставляет их в качестве focusin и focusout соответственно. Для обеспечения согласованности и четкости, используйте пузырьковые имена типа события.

Во всех браузерах, событие load не является пузырьковым. В Internet Explorer 8 и ниже, события paste и reset не являются пузырьковыми. Такие события не поддерживаются для использования с делегированием, но они могут использоваться, когда обработчик событий, непосредственно связан с элементом создания события.

Событие error на объект window использует нестандартные аргументы и возвращает значения конвенций, поэтому оно не поддерживается в jQuery. Вместо этого, назначайте функцию обработчика непосредственно в window.onerror.

Примеры:

$("p").on("click", function(){
alert( $(this).text() );
});