Slyweb
На разработку сайта! Скидки 50%!
Поиск функций jQuery
поиск



Характеристика функции

Данный метод появился в jQuer 1.7. Схожими методами в jQuery являются .bind(), .delegate(), and .live(). Для удаления обработчика установленного методом .on()необходимо использовать метод .off().

Если Вам нужно выполнить обработчик события один раз используйте метод .one()

Название событий и пространство имён

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

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

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

Обработчиком события может быть анонимная функция или её название.

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

Обработчик события принимает родной объект события браузера – «event.originalEvent». К примеру, объект event.type будет содержать название типа события, event.target будет содержать первый элемент, от которого начало всплытие события.

По умолчанию событие всплывает от самого нижнего элемента (event.target) до элемента document, при этом, всплывая, событие инициирует срабатывание других обработчиков, назначенных элементам, которые находятся на пути всплытия события. Для предотвращения запуска обработчиков элементов в момент всплытия события по структуре необходимо использовать метод event.stopPropagation().

Метод event.stopPropagation() остановит срабатывание событий для других элементов, но если есть другие обработчики для исходного элемента они будут так же выполнены. Для предотвращения инициирования и этих обработчиков, необходимо использовать метод event.stopPropagation().

Пример, который иллюстрирует сказанное:

<script type="text/javascript">
$(function(){

$("#dataTable div").on("click", function(event){

	alert(event.target);
});


$("#dataTable").on("click", function(event){

	alert($(this).text());
});

});
</script>
</head>

<body id="pid-welcome">

<div id="dataTable">
<div>

</div>
</div>

Добавьте метод event.stopPropagation() для первого обработчика и «всплытие» события не будет инициировать запуск второго обработчика.

Обработчик события может использовать метод event.preventDefault() для предотвращения действия браузера, предусмотренного по умолчанию для данного вида события. Не все события браузера могут быть отменены, полный список события, которые могут быть отменены этим методом находится по адресу: http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter

Вместо использования этого способа, можно использовать сам метод .on $("a.disabled").on("click", false). В этом случае при нажатии ссылки не произойдёт переход.

Когда jQuery вызывает обработчик, внутри него можно использовать ключ this, который является ссылкой на элемент, с которого началась передача события при прямом связывании обработчика события (когда второй параметр метода .on «selector» опущен или является null), либо это ссылка на элемент, который соответствует селектору, если второй параметр метода on был указан (при делегировании события).

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

Данные доступны в обработчике через объект event.data, если последния не является null или undefined.

Начиная jQuery 1.4 обработчик события может вызываться несколько раз:

Пример, который иллюстрирует сказанное:

function greet(event) { alert("Hello "+event.data.name); }
$("button").on("click", { name: "Karl" }, greet);
$("button").on("click", { name: "Addy" }, greet);

Обработчик указанный в примере будет вызван дважды и будет содержать два разных имени.

Для того чтобы передать данные в обработчик события можо использовать методы .trigger() и .triggerHandler().

Производительность функции .on()

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

Избегайте использование многочисленных фильтров селекторов, например вместо

$("body").on("click","#commentForm .addNew", addComment) 

используйте

$("#commentForm").on("click", ".addNew", addComment). 

Дополнительные данные по методу .on()

Элементы object, embed, и applet не могут использовать всплытие события.


Пример:

Пример:

Пример:

Пример:

Пример:

Пример:

Пример:

Пример:

Пример:

Александр Ермаков. Хостинг - www.pwstudio.org