web-dev-qa-db-fra.com

En quoi consiste exactement le paramètre e (événement) et pourquoi le passer aux fonctions JavaScript?

Eh bien, quand j’ai appris le JavaScript, tous les livres et articles Internet que j'ai lus montraient du code qui passait un paramètre e aux fonctions qui gèrent les événements JavaScript, comme le bloc de code ci-dessous:

function myEvent(e) {
    var evtType = e.type
    alert(evtType)
    // displays click, or whatever the event type was
}

J'ai toujours accepté que cela soit comme ça, mais maintenant j'ai quelques questions (c'est très déroutant pour moi):

  1. D'où vient cette e? Lorsque je regarde l'intégralité du fichier JavaScript, e ne semble pas exister du tout. 
  2. Pourquoi passer ce paramètre e aux fonctions? Les fonctions cesseront-elles de fonctionner si je ne leur transmets pas e?

  3. Considérons le bloc de code ci-dessous. Il existe une variable d'événement (e) transmise à une fonction interne anonyme. Supposons que je souhaite utiliser un objet événement en dehors de la fonction anonyme (peut-être dans une ligne située au-dessus/au-dessous de la ligne element.onkeypress). Comment puis-je faire ceci?

    element.onkeypress = function(e) {
    if(e.keyCode) {
        element.keyCode = e.keyCode;
    } else {
        element.keyCode = e.charCode;
    }
};
javascripteventsjavascript-events
24
Lord Yggdrasill

e est l'abréviation de event 

Le moyen le plus simple de créer un événement consiste à cliquer quelque part sur la page. 

Lorsque vous cliquez sur, un événement click est déclenché. Cette event est en réalité un objet contenant des informations sur l'action qui vient de se produire. Dans le cas de cet exemple, l'événement contiendrait des informations telles que les coordonnées du clic (event.screenX par exemple), l'élément sur lequel vous avez cliqué (event.target) et bien plus encore.

Maintenant, les événements se produisent tout le temps, mais vous n'êtes pas intéressé par tous les événements qui se produisent. Lorsque vous êtes intéressé par un événement, c’est quand vous ajoutez un écouteur d’événement à l’élément que vous savez créer des événements [1]. Par exemple, vous êtes intéressé à savoir lorsque l'utilisateur clique sur un bouton 'Souscrire' et vous souhaitez faire quelque chose lorsque cet événement se produit.

Afin de faire quelque chose à propos de cet événement, vous associez un gestionnaire event au bouton qui vous intéresse. Pour lier le gestionnaire à l'élément, vous devez utiliser element.addEventListener(eventName, handler).

eventName est une chaîne qui correspond au nom de l'événement qui vous intéresse. Dans ce cas, il s'agirait de 'click' (pour l'événement click). 

Le gestionnaire est simplement une fonction qui fait quelque chose (il est exécuté) lorsque l'événement se produit. La fonction de gestionnaire, par défaut, lorsqu'elle est exécutée est transmise à l'objet event (créé lors de la réalisation de l'événement/de l'action qui vous intéresse) en tant qu'argument. 

La définition de event en tant que paramètre de votre fonction de gestionnaire est facultative, mais il est parfois utile (la plupart du temps) que la fonction de gestionnaire connaisse l'événement qui s'est produit. Quand vous faites le définissez c'est la e que vous voyez dans les fonctions telles que celles que vous avez mentionnées. Rappelez-vous que la event est juste un objet javascript normal, contenant de nombreuses propriétés.

J'espère que ça a aidé.

Pour plus d'informations, lisez Création et déclenchement d'événements

Pour ce qui est de votre troisième question, sachez maintenant que vous ne pouvez pas le faire, car e n’existe que lorsqu’un événement se produit. Vous pourriez avoir la fonction de gestionnaire, qui a accès à l'objet e lorsqu'elle est exécutée, pour la stocker dans une variable globale et y travailler.

[1] Ce n'est pas tout à fait correct, mais c'est plus simple à comprendre. La chose la plus correcte à dire est "ajoutez un écouteur d'événement à l'élément dont vous savez qu'il sera traversé par les événements". Voir this pour plus d'informations

41
Dimitris Karagiannis

Le paramètre e que vous demandez est un Event object, et il Représente l'événement déclenché ayant entraîné l'exécution de votre fonction. Il ne doit pas vraiment être e, vous pouvez le nommer comme vous le souhaitez, comme tous les autres paramètres de fonction.

  1. D'où vient ce e? Lorsque je regarde l’ensemble du fichier javascript, e Ne semble pas exister du tout.

Vous ne pourrez pas trouver cette variable e dans votre fichier javascript car Elle n’y existe pas du tout, mais provient du moteur javascript qui exécute Votre fonction de rappel.

Lorsque vous attribuez une fonction de rappel à un événement .__ (par exemple, element.onkeypress = function(e) { ... }), vous attribuez au moteur Javascript une fonction à exécuter/à l'appel lorsque cet événement se déclenche et à l'exécution./passe le long d'un objet Event représentant l'événement qui vient de se produire. Javascript pourrait faire quelque chosecomme ceci, pour appeler votre fonction de rappel:

var e = new Event();
callbackFunction(e);

et c’est d’où l’objet Event object e.

  1. Pourquoi passer ce paramètre e aux fonctions? La fonction cessera-t-elle de fonctionner si Je ne le passe pas?

La fonction ne cessera pas de fonctionner si vous ne disposez pas du paramètre e. Mais si vous devez accéder à quelques détails sur l'événement qui a provoqué l'exécution de votre fonction , Vous aurez besoin du paramètre e pour les obtenir.

  1. Considérons le bloc de code ci-dessous, une variable d'événement (e) est transmise à une fonction interne Anonymous. Disons que je veux utiliser un objet événement en dehors de la fonction Anonymous (peut-être dans une ligne située au-dessus/au-dessous de la ligne element.onkeypress), Comment puis-je procéder?

Je ne pense pas que vous puissiez le faire, même si vous le stockez dans une variable en dehors de la portée De votre fonction de rappel. En effet, votre fonction n'est pas exécutée immédiatement lorsque vous la déclarez, mais uniquement lorsque l'événement est déclenché .__ (par exemple, si vous appuyez sur une touche pour déclencher l'événement 'pression de touche').

var event;

element.onkeypress = function(e) {
    event = e;
    ...
};

console.log(event); // => undefined

Cela ne peut fonctionner que si le code utilisant la variable event Est également exécuté ultérieurement, en particulier après que la fonction anonyme attribuée à onkeypress_ est exécutée. Le code ci-dessous pourrait donc fonctionner:

var event;

element.onkeypress = function(e) {
    event = e;
    ...
};

setTimeout(function() {
    console.log(event); // => the event object, if the `keypress` event
                        //    fired before `setTimeout` calls this function
}, 100000); // <= set to very large value so that it gets run way way later
6
Arnelle Balane

Lorsqu'un écouteur est ajouté à l'aide de addEventListener , le premier argument transmis à la fonction est un objet Event. Il sera donc affecté au paramètre e (ou à n'importe quel nom attribué au premier paramètre de la fonction).

0
RobG
  1. C’est comme cela que JS fonctionne: vous obtenez un objet événement dans chaque rappel d’événement. Il contient beaucoup d'informations sur l'événement.
  2. La fonction ne cessera pas de fonctionner si vous ne la passez pas, elle est facultative. Allez sur et console.log l'événement (e) et voir l'objet événement et ses propriétés. Ce sera plus clair quand vous verrez ce que cela a.

  3. Vous pouvez l'utiliser en dehors de cette fonction anonyme en la stockant, par exemple:

    var myEvent;

element.onkeypress = function(e) {
    myEvent = e;
    if(e.keyCode) {
        element.keyCode = e.keyCode;
    } else {
        element.keyCode = e.charCode;
    }
};

console.log(myEvent);

    mais vous devez savoir que l'objet événement est relatif uniquement à l'événement en question et que vous devez décider si vous devez réellement le faire.

0
Bata

Je ferai de mon mieux pour expliquer de la manière la plus abstraite possible. La mise en œuvre réelle est probablement beaucoup plus complexe. Par conséquent, les noms que je suis sur le point d'utiliser sont hypothétiques, mais ils servent à bien expliquer, j'espère;)

Chaque nœud du navigateur est une implémentation de la classe EventEmitter. Cette classe conserve un objet events qui contient clé: valeur paires de eventType (la clé): un tableau contenant des fonctions listener (la valeur). 

Les deux fonctions définies dans la classe EventEmitter sont addEventListener et fire. 

class EventEmitter {
  constructor(id) {
    this.events = {};
    this.id = id;
  }

  addEventListener(eventType, listener) {
    if (!this.events[eventType]) {
      this.events[eventType] = [];
    }

    this.events[eventType].Push(listener);
  }

  fire(eventType, eventProperties) {
    if (this.events[eventType]) {
      this.events[eventType].forEach(listener => listener(eventProperties));
    }
  }
}

addEventListener est utilisé par le programmeur pour enregistrer leurs fonctions listener souhaitées à déclencher lors de l'exécution de leur eventType désirée. 

Notez que pour chaque eventType distinct, il existe un tableau distinct. Ce tableau peut contenir plusieurs fonctions listener pour la même eventType.

fire est appelé par le navigateur en réponse aux interactions de l'utilisateur. Le navigateur sait quel type d'interaction a été effectué et sur quel nœud il a été effectué. Il utilise cette connaissance pour appeler fire sur le nœud approprié avec les paramètres appropriés, à savoir eventType et eventProperties. 

fire parcourt le tableau associé à eventType spécifique. En parcourant le tableau, il appelle chaque fonction listener à l'intérieur du tableau en lui transmettant eventProperties.

C'est ainsi que les fonctions listener, enregistrées uniquement avec le type d'événement particulier, sont appelées une fois que fire est appelé.

Voici une démonstration. Il y a 3 acteurs dans cette démonstration. Programmeur, navigateur et utilisateur. 

let button = document.getElementById("myButton"); // Done by the Programmer
let button = new EventEmitter("myButton"); // Done by the Browser somewhere in the background. 


button.addEventListener("click", () =>
  console.log("This is one of the listeners for the click event. But it DOES NOT need the event details.")
); // Done By the Programmer


button.addEventListener("click", e => {
  console.log(
    "This is another listener for the click event! However this DOES need the event details."
  );
  console.log(e);
}); // Done By the Programmer


//User clicks the button


button.fire("click", {
  type: "click",
  clientX: 47,
  clientY: 18,
  bubbles: true,
  manyOthers: "etc"
}); // Done By the Browser in the background

Une fois que l'utilisateur a cliqué sur le bouton, le navigateur appelle fire sur le bouton en transmettant "cliquer" en tant que eventType et l'objet contenant eventProperties. Ainsi, toutes les fonctions listener enregistrées sous "cliquez sur" eventType sont appelées.

Comme vous pouvez le constater, le navigateur TOUJOURS enflamme eventProperties. En tant que programmeur, vous pouvez ou non utiliser ces propriétés dans vos fonctions listener. 

Quelques réponses que j'ai trouvées utiles sur stackoveflow:

Où un événement enregistré avec addEventListener est-il stocké?

Où sont stockés les gestionnaires d'événements Javascript?

0
Haris Ghauri