Pouvez-vous définir l'événement.de données avec jquery déclencheur

Réponse Courte:

Peut trigger() transmettre des données à vos gestionnaires d'événements? Oui (comme paramètres supplémentaires)

Peut trigger() transmettre des données à l'événement.objet de données directement? Pas (seulement sur() ne ce)

//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) {...});

Réponse Longue

La méthode trigger () n'5 choses principales.

1. Il crée un JQueryEventObject avec le facultatif et le type d'espace de noms que vous donnez, il
2. Il envoie ou émet un événement d'un type particulier, qui se déplace jusqu'à la DOM jusqu'à ce qu'il atteigne le haut de la ou sa propagation est arrêté.
3. Il définit la signature de gestionnaires d'événements pour ce type d'événement.
   • function(event) {...} est la valeur par défaut
4. Il passe à l'événement en tant que premier paramètre à ceux des gestionnaires
5. Il (en option) passe des paramètres supplémentaires à n'importe quel gestionnaire de l'événement
   • function(event, additionalParams) {}

Les numéros 3 et 5 sont les plus importants et pertinents pour vous. Puisque vous définissent implicitement l'api pour la gestion de cet événement, vous voulez être cohérent avec la façon dont vous déclencher des événements afin que les personnes qui utilisent votre code peut être cohérent avec la façon dont ils l'utilisent.

Exemple 1 Cohérence

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();
    }
})

Exemple 2 Voici l'exemple typique montrant à la fois trigger() et():

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']);

Donc n'oubliez pas.

• .trigger(): émettre l'événement et de définir le paramètre 2, 3, etc de façon cohérente si nécessaire

• .sur(): l'événement est de remonter les dom. faire quelques trucs, d'ajouter ou de l'utilisation de données d'événement et d'utiliser les très params qui déclenchent ajouté ou non.

• Tangente: Si vous souhaitez définir des gestionnaires d'événements pour les éléments dynamiques qui peuvent être ajoutés ou supprimés de manière arbitraire, c'est très facile avec jQuery. Voir cette réponse: En jQuery, comment associer des événements à la dynamique des éléments html?

Vous pouvez le faire de cette façon:-

Exemple

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

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

Vous pouvez passer de l'événement.données trop avec la même approche. Consultez cette Objet De L'Événement

Je sais qu'une solution de contournement que nous pouvons utiliser pour cette

$("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");

Ici est un démo

JQuery dans le site, vous pouvez voir la déclaration de la trigger fonction: .trigger( eventType [, extraParameters] )

La extraParameters doit être un tableau ou un objet unique et vous serez autorisé à obtenir ces objets avec des arguments[1+] (arguments[0] est égal à l'objet de l'événement).

Donc, voici un exemple:

$('#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]);

Il m'a fallu un certain temps pour comprendre la philosophie derrière tout cela. Un événement comprend deux entités: l'auditeur et le répartiteur. Le event.data champ est destiné à être utilisé par l'auditeur seulement. C'est un peu comme l'affectation d'un nom à un numéro de téléphone:

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

Vous pourriez prendre le téléphone et d'attendre de l'autre côté pour vous dire qu'elle est votre Mère. Ou vous pouvez utiliser event.data pour joindre l'information supplémentaire pertinente à cet événement.

La $.trigger et $.triggerHandler méthodes sont appelées par le répartiteur côté d'un événement. C'est pourquoi ils ne vous permettent de spécifier le event.data. Au lieu de cela, vous pouvez utiliser leur extraParameters argument.

vous pouvez le faire de cette façon

  <input id="btn" type="button" />
    <input id="btn2" type="button" />​
    $("#btn").bind("click",function(e) {
        var data2 = {type:"click",name:"Raptors",sport:"basketball"};
        $("#btn2").trigger(data2);
    });
    $("#btn2").bind("click",function(e) {
       console.log(e.name + " " + e.sport);
    });