Справочник API
event.data в jQuery
Содержание статьи
-
Категории: Events › Event Object
Содержит любые вспомогательные данные, если они были переданы обработчику события при его установке во втором параметре команды .bind() или .one().
Синтаксис и описание:
Добавлено в jQuery 1.1event.data
Свойство event.data содержит произвольные данные, которые были переданы обработчику события в момент его установки — вторым аргументом
.on( events, data, handler )или.bind( type, data, fn ). Если данные при установке обработчика не передавались,event.dataравноundefined.Чаще всего это нужно, чтобы «привязать» к обработчику контекст, который иначе терялся бы из-за замыкания — например, индекс элемента в цикле или идентификатор записи, к которой относится кнопка.
Возвращаемое значение: Любое значение, переданное вторым параметром при установке обработчика (объект, строка, число); undefined, если данные не передавались.
Примечание:
event.data — это ровно то, что передали при подписке на событие, а не данные, переданные в
.trigger( event, extraParameters )при вызове события: они попадают в обработчик отдельными аргументами после объекта события, а не вevent.data.Ещё момент:
Значение фиксируется один раз — при вызове
.on()/.bind(). Если объект, переданный как data, потом изменить снаружи,event.dataбудет ссылаться на тот же объект (это ссылка, а не копия), но сама привязка данных к обработчику не обновляется повторным вызовом.on().В jQuery 3.x и 4.0:
Свойство работает без изменений во всех поддерживаемых версиях, включая 4.0. У нативного
Eventпрямого аналога нет — это возможность именно jQuery; на чистом JavaScript такой же эффект дают замыкания или атрибутыdata-*на элементе.
Примеры:
Передаём индекс кнопки через
data, чтобы не терять его в цикле:for ( var i = 0; i < 5; i++ ) { $( "<button>Кнопка " + i + "</button>" ) .appendTo( "#buttons" ) .on( "click", { index: i }, function ( event ) { alert( "Нажата кнопка №" + event.data.index ); } ); }Данные можно передавать объектом с несколькими полями:
$( "#save" ).on( "click", { url: "/save", id: 42 }, function ( event ) { console.log( "Отправляем на " + event.data.url + ", id=" + event.data.id ); } );Если обработчик один на несколько похожих элементов,
event.dataпомогает избежать дублирования кода:$( ".tab" ).each( function ( i ) { $( this ).on( "click", { tabIndex: i }, function ( event ) { $( ".tab-content" ).hide().eq( event.data.tabIndex ).show(); } ); } );