Envoi de l'événement avec des données

J'aimerais distribuer un événement qui permettra de transmettre certaines données à n'importe quel événement auditeurs qui écoutent sur cet événement.

Considérant une fonction qui déclenche un événement:

function click() {
  const x = 'foo'
  document.dispatchEvent(new CustomEvent('clicked'))
}

click()

Comment puis-je transmettre des données personnalisées à l'écouteur d'événement?

document.addEventListener('clicked', function(e) {
  console.log(x) //logs "foo"
})
InformationsquelleAutor Nik Kyriakides | 2014-05-18
  1. 61

    Peut-être vous êtes à la recherche pour event.detail

    new CustomEvent('eventName', {'detail': data})

    Au lieu de l'utilisation des données x et dans l'écouteur d'événement, vous pouvez accéder à x, à l'aide de l'événement.détail

    function getSelectionBounds() {
  var x = (bounds["x"].toFixed(2));
  var y = "xyz";
  var selectionFired = new CustomEvent("selectionFired", {
    "detail": {"x":x,"y":y }
  });

  document.dispatchEvent(selectionFired);
};

document.addEventListener("selectionFired", function (e) {
  alert(e.detail.x+"   "+e.detail.y);
});
    • vérifier mes mises à jour répondre
    • cela se passe dans tous les navigateurs pouvez vous s'il vous plaît mettre à jour votre code à l'aide de ce que j'ai proposé ou créer un violon
    • ce n'dispositif d'alerte dans mon code mis à jour.
    • vérifier mes mises à jour répondre de plusieurs variables
    • Je crois que vous avez oublié un } dans le détail, mais à part ça il fonctionne comme un charme. Merci beaucoup encore une fois
    InformationsquelleAutor adnan kamili
  2. 4

    Malheureusement CustomEvent fonctionne pas sur IE (Bord avant), mais vous pouvez tout simplement utiliser le normal Event.

    Il suffit de penser que aussi Event est un objet, et donc vous pouvez ajouter tous les attributs personnalisés dont vous avez besoin:

     event.X = "foo";

    Sur cette façon, vous pouvez vérifier votre champ personnalisé sur la fonction de rappel joned à l'événement.

    NB. Pour les anciennes version de IE vous besoin de cette polyfill pour new Event manqué fonction:

    var event;
if(typeof(Event) === 'function') {
  event = new Event(EVENT_NAME);
}else{
  event = document.createEvent('Event');
  event.initEvent(EVENT_NAME, false, false);
}
    InformationsquelleAutor Andrea Savojardo