2012-03-06 2 views

ответ

24

Надеюсь, я не ошибся, но вы имеете в виду передачу дополнительных данных с помощью метода trigger?

$(app.Model).trigger("foo", additionalData); 

И где-то еще ...

$(app.Model).on("foo", callback); 

var callback = function(event, additionalData) { 
    console.log(additionalData); 
} 

Обратите внимание, что если вы передать дополнительные данные с trigger, вашим первым параметром в функции обратного вызова всегда является фактическим событием вы запуск.

app.Model Я использовал в скобках объект, который должен вызывать событие, а также прослушивает это событие. Думайте об этом как о пространстве имен. Вы всегда можете использовать document, любой селектор DOM или даже объект, который вам нравится, просто убедитесь, что и trigger, и on должны использовать тот же объект (то есть элементы DOM, которые были удалены из DOM временно подвержены ошибкам) ,

+1

+1 Для вас в документах не упоминается, как получить доступ к этим дополнительным данным. –

14

Вы можете сделать это так: -

Пример

//Create a new jQuery.Event object without the "new" operator. 
    var e = jQuery.Event("click"); 

    // trigger an artificial click event 
    jQuery("body").trigger(e); 

Вы можете передать event.data тоже с такой же подход. См. Это Event Object

+0

Можете ли вы показать пример кода, как передать event.data с этим подходом? – user570605

+0

var e = jQuery.Event ("click"); e.data = "хорошие данные"; jQuery ("body"). Trigger (e); – Dorad

+1

Это ** правильный ** ответ на этот вопрос. Другие «ответы» - это хаки. – vsync

0

Да. В документации сказано:

.trigger (типСобытия [, extraParameters])

Обратите внимание на разницу между дополнительными параметрами мы проходящими здесь и параметр метода .bind()eventData. Оба являются механизмами передачи информации обработчику событий, но аргумент extraParameters для .trigger() позволяет определить информацию во время запуска события, в то время как аргумент eventData для .bind() требует, чтобы информация была уже вычислена в момент привязки обработчика ,

2

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

$("button").on("click", function(event) { 
    event.data = $(this).data('events'); // get the data value 
    alert(event.data); //use your data as you want 
}); 


//Now set the data value and trigger 
$("button").data('events','youreventsvalue').trigger("click"); 

Вот это demo

+0

Это действительное решение. Почему нисходящий? – Starx

0

На сайте JQuery вы можете увидеть объявление для функции trigger: .trigger(eventType [, extraParameters])

extraParameters должен быть массивом или единственным объектом, и вам будет разрешено получать эти объекты с помощью аргументов [1+] (аргументы [0] равный объекту события).

Итак, вот пример:

$('#foo').bind('custom', function(event) { 
    if (arguments.length > 1) { 
    $.each(arguments, function(i,arg){ 
     alert("element " + i + " is " + arg); 
    }) 
    } 
}); 

$('#foo').trigger('custom', ['Custom', 'Event', { 'test' : 'attr from object' }, 123]); 
0

Насколько я знаю, то же самое dataObject что вы определили с оригиналом:

$('selector').on('eventName', dataObject , functionName) 

также будет отправлено, когда вы используете `$ ('селектор'). запуск ('EventName').

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

+0

Хорошая точка. Стоит отметить, что dataObject доступен с помощью свойства данных события. Что-то вроде этой функции foo (e) {console.log (e.data)} –

11

Это был подход, который я принял.

$('#foo').on('click', { init: false }, function(e, data) { 
     data = data || e.data; 
     console.log(data.init); // will be true in the trigger, and false in the click. 
    }) 
    .trigger('click', { init: true }); 
57

Короткий ответ:

Can триггер() передавать данные обработчиков событий? Да (как дополнительные параметры)

Может триггер() передавать данные в event.data объект непосредственно? Нет (только на() это делает)

// Using this will pass myData to every event handler as the second parameter. 
trigger('myEvent', [myData]) 
// Instead of this 
on('myEvent', function(evt) {...}); 
// You would do this 
on('myEvent', function(evt, myData) {...}); 

Длинный ответ

Способ запуска() делает 5 основных вещей.

  1. Это создает JQueryEventObject с типом и дополнительным пространством имен вы даете ему
  2. Он посылает или генерирует событие определенного типа, который перемещается вверх по DOM, пока он не достигнет верхней или его распространение прекращается.
  3. Он определяет подпись обработчиков событий для этого типа события.
    • функция (событие) {...} является значение по умолчанию
  4. Это передает событие в качестве первого параметра в этих обработчик
  5. Это (необязательно) дополнительные параметры проходит в любых обработчик события
    • функции (событие, additionalParams) {}

Номера 3 и 5 являются наиболее важными и важными для вас. Поскольку вы неявно определяете api для обработки этого события, вы хотите быть совместимым с тем, как вы запускаете события, чтобы люди, которые используют ваш код, могли быть совместимы с тем, как они его используют.

Пример 1 Консистенция

function Car(speed, tires, brakes) { 
    this.speed = speed; 
    this.tires = tires; 
    this.brakes = brakes; 
} 

Car.prototype.brake = function(amount) { 
    // You can do this (Event handler will have access to these parameters) 
    car.trigger('brake.car', [this.speed, this.brakes, this.tires, amount]) 
    // Or this (Event handler will have access to these parameters) 
    car.trigger('brake.car', [this, amount]) 
    // but try not to mix and match with the same event type 
} 
... 
//This is the first way from above (choose one or the other, but don't mix and match). 
passenger.on('brake.car', {person: passenger}, function(evt, carSpeed, carBrakes, carTires, brakeAmount){ 
    if(brakeAmount > 50) 
     passenger.hangOnTight(); 
    } 
}) 

... 
// This is the second way from above (choose one or the other, but don't mix and match). 
passenger.on('brake.car', function(evt, car, brakeAmount){ 
    if(brakeAmount > 50) 
     passenger.hangOnTight(); 
    } 
}) 

Пример 2 Вот типичный пример, показывающий, как триггер() и():

jQuery(document).on('eventName' {eventData1: 'foo', eventData2: 'bar'}, function (evt, extraParam1, extraParam2) { 
    //This code runs when the event is triggered 
    console.log(evt.data.eventData1) // foo 
    console.log(evt.data.eventData2) // bar 
    console.log(extraParam1) // 'extra param 1' 
    console.log(extraParam2) // 'extra param 2' 
}); 

jQuery(document).trigger('eventName', ['extra param 1', 'extra param 2']); 

Так просто помнить.

  • .trigger(): испускают событие и определяют параметр 2, 3 и т.д., если это необходимо последовательно
  • .На(): событие барботирования вверх РОМ. делать некоторые вещи, добавлять или использовать данные событий и использовать дополнительные параметры, которые запускаются добавлением или нет.
+2

Отличный ответ. –

+0

Хороший ответ, но я не могу использовать его, пока мой элемент DOM динамически (добавлен ajax-вызов). Слишком плохо – Delphine

0

Мне потребовалось некоторое время, чтобы понять философию этого. Событие включает в себя два объекта: слушатель и диспетчер. Поле event.data предназначалось для использования только слушателем. Это вроде как присвоение имени к номеру телефона:

$("(818)548-2733").on("incomingcall", null, "Mom", pickup); 

Вы можете забрать телефон и ждать другой стороны, чтобы сказать вам, что она твоя мама. Или вы можете использовать event.data, чтобы приложить дополнительную информацию, относящуюся к этому событию.

Методы вызова вызываются на стороне диспетчера события. $.trigger и $.triggerHandler. Вот почему они не позволяют указать event.data. Вместо этого вы можете использовать свой аргумент extraParameters.

0
$("pressedButton").on("click", function(event) { 
    var buttonID = $(this).data('buttonID'); 
    alert(buttonID); // alerts 'save' string passed as an argument 
}); 

$("pressedButton").data('buttonID','save').trigger("click"); 
+0

Это допустимое решение. Используйте его, это просто :-) –

+0

... и супер опасный путь. Что делать, если на нажатой кнопке уже есть данные? Это не делает ничего, чтобы сохранить предыдущие элементы данных. – dudewad

Смежные вопросы